knockout 利用mapping在 $.post里 跟新viewModel为什么没起到作用？ 求高手解答.
0
悬赏园豆：100
[已解决问题]
解决于 2016-08-12 15:47
<input data-bind="viewModel ()[0].stuname">
<input type="button" id="btnOk" value="点 击"/>
<br/><br/>
<script type="text/javascript">
$(function () {
$("#btnOk").click(function () {
$.post("/Home/c", {}, function (r) {
var data = JSON.parse(r);
//这里为什么不能起到作用？我后台数据返回来后转换成了js对象data
//data={stuid:"1",stuname:"张三"}
//但是数据没有跟新到viewModel上
ko.mapping.fromJS(data,viewModel()[0]);
});
});
});
var data = [{stuid:"0",stuname:"0"}];
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
</script>
最佳答案
0
ko.mapping.fromJS(data, viewModel);
收获园豆：100
兄弟，为什么需要这样定义？viewModel = ko.mapping.fromJS(data);这样定义不行吗？
可以加你QQ好友吗？
@小熊vs:http://knockoutjs.com/documentation/plugins-mapping.html 可以看看文档
@Summer、: 全英文的 小弟压力好大，大哥，真心敬佩你这样的大能，能否让小弟加你为好友？
@小熊vs:
<input type="text" data-bind="value:viewModel()[0].stuname"/>
<input type="button" id="btnOk" value="点 击"/>
<br/><br/>
<script type="text/javascript">
$(function () {
$("#btnOk").click(function () {
$.post("/Home/c", {}, function (r) {
var data = JSON.parse(r);
ko.mapping.fromJS(data,viewModel[0]);
});
});
});
var data = [{stuid:"0",stuname:"0"}];
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
@Summer、: 我修改成这样也是更新不了数据了？
@小熊vs: 我讨厌用这个 之前是别人规定用没办法 我都半年没用了 加我也没用啊 都忘记了 我不可能帮你看文档吧 推荐用vue.js 中文文档 妥妥的
@Summer、: 恩 大哥谢了 小弟还是想加你为好友，小弟想在前进的道路上竖立一杆标杆
@小熊vs:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/knockout/3.4.0/knockout-min.js"></script>
<script src="http://cdn.bootcss.com/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
</head>
<body>
<!-- <span data-bind="text: name"></span> -->
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody data-bind="foreach: data">
<tr>
<td data-bind="text: stuid"></td>
<td data-bind="text: stuname"></td>
</tr>
</tbody>
</table>
<input type="button" id="btnOk" data-bind="click: clickEvent" value="点 击" />
<br/>
<br/>
<script type="text/javascript">
var viewModel = new function() {
var self = this;
self.data = ko.mapping.fromJS([{
stuid: "0",
stuname: "0"
}]);
self.clickEvent = function() {
ko.mapping.fromJS([{
stuid: "1",
stuname: "2"
}], self.data);
}
}
ko.applyBindings(viewModel);
</script>
</body>
</html>
写了个demo，你运行起来自己看看吧
@Summer、: 恩恩
@Summer、: 大哥 看得出来 你是个好心人，能不能让小弟加你的QQ，小弟的人生需要一杆标杆
@Summer、: 大哥 可以加你为还有吗
@Summer、: 418908742 大哥 我QQ
@Summer、: 我在$.post跟新数据之前 不需要再外面先
var data = [{stuid:"0",stuname:"0"}]; //这样好麻烦
var viewModel = ko.mapping.fromJS(data);
这样定义吗？
@小熊vs: 定义一个空数组
var data=[];
@小熊vs: 有问题这里问就好 总有人帮你解答 不用加我qq啊 :-D
@小熊vs: 没有规定一定要用knockout的话 还是用vue.js吧 好用很多
@Summer、:
<input type="text" data-bind="value:viewModel()[0].stuname"/>
<input type="text" data-bind="value:viewModel()[0].stuid"/> //这里的viewModel()[0].stuid值没有出来，不管绑什么值在这里都不出来，只有上面的那一个能够出来
<input type="button" id="btnOk" value="点 击"/>
<br/><br/>
<script type="text/javascript">
$(function () {
$("#btnOk").click(function () {
$.post("/Home/c", {}, function (r) {
var data = JSON.parse(r);
ko.mapping.fromJS(data,{},viewModel);
});
});
});
var data=[];
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
</script>
@Summer、: vue.js我一点都不熟悉啊，大哥我是刚出校园的菜鸟，目前我就熟悉Jquery和knockout这两个js包
@小熊vs: 初始化的时候是空 肯定没有值出来 不知道你ajax返回的r是什么
@Summer、: r 是json格式的数据
[{"stuid":"1","stuname":"张三"},{"stuid":"2","stuname":"李四"}]
@小熊vs:
<!DOCTYPE html> <html> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://cdn.bootcss.com/knockout/3.4.0/knockout-min.js"></script> <script src="http://cdn.bootcss.com/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> </head> <body> <div data-bind="foreach: data"> <input type="text" data-bind="value:stuid" /> <input type="text" data-bind="value:stuname" /> <br/> </div> <input type="button" id="btnOk" data-bind="click: clickEvent" value="点 击" /> <br/> <br/> <script type="text/javascript"> var viewModel = new function() { var self = this; self.data = ko.mapping.fromJS([]); self.clickEvent = function() { ko.mapping.fromJS([{ "stuid": "1", "stuname": "张三" }, { "stuid": "2", "stuname": "李四" }], self.data); } } ko.applyBindings(viewModel); </script> </body> </html>
你创建一个html文件，复制进去运行一下就知道了……参考着做啊
@Summer、:
<input type="text" data-bind="value:viewModel.data[0].stuname"/>
<input type="text" data-bind="value:viewModel.data[0].stuid"/>
大哥 我这样取值是不是有问题？我这样写了就什么数据都不能出来了
@Summer、:
<input type="text" data-bind="value:viewModel.data()[0].stuname"/>
<input type="text" data-bind="value:viewModel.data()[0].stuid"/>
大哥 我这样取值是不是有问题？我这样写了就什么数据都不能出来了
@Summer、: js里面我是按照大哥的写法写的
@小熊vs: 嗯 你先看看knockout的基础知识先吧 别这样绑定了……学学怎么用浏览器调试
@Summer、: <input type="text" data-bind="value:viewModel.data()[0].stuname"/>
这样怎么就取不出值来了？ 以前我都是这样取值的啊？
@小熊vs: 你调试下viewModel.data() 有没有值先 也不是说不能这样取 这写法麻烦
@Summer、:
<input type="text" data-bind="value:viewModel.data()"/>//我取到了所有的对象[object Object]
<input type="text" data-bind="value:viewModel.data()[0]"/>//我取到了集合里面第一个对象[object Object],[object Object]
唯独<input type="text" data-bind="value:viewModel.data()[0].stuid"/>就报错
@Summer、:
<input type="text" data-bind="value:viewModel.data()"/>//我取到了所有的对象[object Object],[object Object]
<input type="text" data-bind="value:viewModel.data()[0]"/>//我取到了集合里面第一个对象[object Object]
唯独<input type="text" data-bind="value:viewModel.data()[0].stuid"/>就报错
@小熊vs:
<div data-bind="with:viewModel()[0]">
<input type="text" data-bind="value:stuname" />
<input type="text" data-bind="value:stuid" />
</div>
这样绑定 文档 文档 文档 自己多看看 只看文档里面的代码就好
@Summer、: 恩 谢谢大哥
但是<div data-bind="with:viewModel()[0]">
<input type="text" data-bind="value:stuname" />
<input type="text" data-bind="value:stuid" />
</div>
这样出不来效果
<div data-bind="with:viewModel.data">
<input type="text" data-bind="value:stuname" />
<input type="text" data-bind="value:stuid" />
</div>
这样可以出来，但是所有数据都循环出来了 我只想要一条数据呢？
大哥说的文档是指的?
@小熊vs: http://knockoutjs.com/documentation/introduction.html 官方文档
想要一条就<div data-bind="with:viewModel.data[0]">
只要一条 那你为毛用[] 你直接用{} 然后ajax获取一条数据就好啊
@Summer、: 大哥 我就是不能理解为什么
<input type="text" data-bind="value:viewModel.data()[0].stuid"/>
这个就有问题？
@Summer、:
//这样是可以
<div data-bind="with:viewModel.data[0]">
<input type="text" data-bind="value:stuid"/>
</div>
//但是为什么就不能直接这样呢？
<input type="text" data-bind="value:viewModel.data()[0].stuid"/>
@小熊vs: 这个你得看源码去了 自己了解下 反正人家规定了不能这么用
@Summer、: 恩恩 大哥 谢了 !
大哥 这个帖子可以晚点结吗，我后期可能还要和大哥沟通下
@Summer、:大哥 早上好
//为什么我的tabl不能设置显示隐藏啊，效果出不来visible:viewModel.type()=='1'?true:false
<table data-bind="foreach:viewModel.data,visible:viewModel.type()=='1'?true:false">
<tr>
<td data-bind="text:ClassId">
</td>
<td data-bind="text:Birhday">
</td>
</tr>
</table>
var viewModel = new function() {
var self = this;
self.type = ko.observable("1");
self.hehe = ko.observable([{stuid:"a"}]);
self.data = ko.mapping.fromJS([]);
}
}
ko.applyBindings(viewModel);
@Summer、: 效果出来了
@Summer、: 大哥 可以加你QQ号码
@小熊vs: 0.0
@Summer、: 大哥 你就成全我吧
@Summer、: QQ:418908742 大哥我QQ留了 你加我吧
@Summer、: 大哥 如果想用knockout做一个两级联动该怎么做啊？
@Summer、: 大哥 在吗？江湖救急！！
//这是一条一条的循环data里面的数据，怎么让它两条或三条的那种方式循环显示数据了
<div data-bind="foreach: viewModel.data">
<input type="text" data-bind="value:ClassId"/>
<input type="text" data-bind="value:Birhday"/>
</div>
@小熊vs: 循环本来就是一条一条的 不知道你为什么要这样做
@Summer、: 我想改变布局方式，大哥 这个我解决了，通过浮动也可以实现几条数据水平显示。
大哥 可以加你QQ吗
@小熊vs: 你厉害 不加了 有啥问题这里问 等下会被你q死
@Summer、: 大哥可以放心啊 我不是那种不懂分寸的小弟，绝对不会骚扰到大哥的0.0
@Summer、: 大哥 在吗 knockout正常情况下怎么把后台获取到的json数据跟新到viewModel上啊？
@Summer、: 大哥 在吗 江湖救急 小弟有个有趣的问题要向你请教！！
@Summer、:
//页面代码 //循环输出数组ul 里面的内容，采用的是html输出一段文字和一个img图片，但是为什么我绑在图片上的点击事件就无效呢？ <Ul id='item' data-bind="foreach:viewModel.ul"> <li data-bind="html:$data"></li> </Ul> //js代码 var viewModel = new function() { var self = this; self.close = function() { alert("sss"); }; self.index = 3; self.ul = ko.observableArray( [ "第一个<img data-bind='click:viewModel.close' src='#'>", "第二个<img data-bind='click:viewModel.close' src='#'>", "第三个<img data-bind='click:viewModel.close' src='#'>" ]); }
大哥这是什么原因啊
@小熊vs: 你要按套路来
@Summer、: ??大哥 这不能实现吗？
@Summer、: 大哥 我搞这个搞半天了，效果为什么不能出来呢？
@小熊vs: data-bind="html:xx" 不能这么用的
@Summer、: 大哥 那是怎么用的？ 我对knockout不是很熟悉，大哥多多指教
@小熊vs:
<Ul id='item' data-bind="foreach:ul"> <li> <span data-bind="text:text"></span> <span data-bind="click:$root.close"> <img data-bind="attr:{src:img}"></span> </li> </Ul> var viewModel = new function() { var self = this; self.close = function() { alert("sss"); }; self.index = 3; self.ul = ko.observableArray([{ text: "第一个", img: '#' }, { text: "第二个", img: '#' }, { text: "第三个", img: '#' }]); }
换个思路做 不就出来了
@小熊vs: 大哥我就是想在每个li里面添加一个图片给他一个点击事件，然后事件上面绑定li上面的文字做参数。 但是我给li绑定了$data的值后在li上面写一个img标签就不能显示了，搞得我只能在后台拼接，然后在前台html输出出来了。大哥 有什么方法可解吗？
@Summer、: 恩恩 谢谢大哥 我试试
@小熊vs: 还是大哥厉害 是我没转过弯来~.~
@Summer、: 还是大哥厉害 是我没转过弯来~.~
@Summer、: 大哥 这个$root 是什么啊？ 我第一次见
@小熊vs: 用$parent也可以 循环内要调用事件 就要加这个 不然调用不到
@Summer、: 恩恩 知道了
@Summer、:
//页面代码 //大哥，我把click:$root.close(1)传了个参数1，close方法直接 alert参数，但是为什么页面一运行就会直接弹出参数呢，，不是应该我点击才触发事件的吗？ <Ul id='item' data-bind="foreach:ul"> <li> <span data-bind="text:$data"></span> <span data-bind="click:$root.close(1)"> <img data-bind="attr:{src:'#'}"> </span> </li> </Ul> //js代码 var viewModel = new function() { var self = this; self.close = function(data) { alert(data); }; self.index = 3; self.ul = ko.observableArray( [ "第一个", "第二个", "第三个" ]); }
大哥这是什么原因造成的？
@小熊vs: click:$root.close 这样就好 不要传 data里面会有数据的
@Summer、: 恩恩
@Summer、: 大哥 用knockout怎么做两级联动啊？
@小熊vs:
var viewModel = new function() { var self = this; self.selectlist = ko.observableArray( [ {"广东":["广州","深圳"]}, {"湖南":["长沙","郴州"]} ]); }
@Summer、:
var viewModel = new function() { var self = this; self.selectlist = ko.observableArray( [ {"广东":["广州","深圳"]}, {"湖南":["长沙","郴州"]} ]); }
大哥 这个怎么绑定到两个下拉列表框上做到两级联动?
@小熊vs: 大哥 在吗
@小熊vs:
<!DOCTYPE html> <html> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://cdn.bootcss.com/knockout/3.4.0/knockout-min.js"></script> <script src="http://cdn.bootcss.com/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> </head> <body> <select data-bind=" options: selectlist, optionsText: 'province', value:province, optionsCaption: '选择省份'"> </select> <!-- ko with:province --> <select data-bind=" visible:$parent.province, options: city, optionsText: 'name', value:$parent.city, optionsCaption: '选择城市'"> </select> <!-- /ko --> <br/> <br/> <script type="text/javascript"> var viewModel = new function() { var self = this; self.province = ko.observable(); self.city = ko.observable(); self.selectlist = ko.observableArray( [{ "id": 1, "province": "广东", "city": [{ "name": "广州" }, { "name": "深圳" }] }, { "id": 2, "province": "湖南", "city": [{ "name": "长沙" }, { "name": "郴州" }] }]); } ko.applyBindings(viewModel); </script> </body> </html>
@Summer、: 大哥 厉害~.~ 我何时才能达到大哥的一般水平啊。小弟刚出道，现在月薪才5k 0.0
@Summer、: self.city = ko.observable();是空值，是怎么做到选择省份后给它赋值的？？
@Summer、:
大哥 是怎么做到在选择省份后给
self.province = ko.observable();
self.city = ko.observable();
赋值的？
$parent.province,这是什么语法？
@小熊vs: 大哥 你工资都赶上我了 啥也不想说了 我想静静……
@Summer、: 大哥 我错了 我明天就去跟老板主动降低工资
@Summer、: 大哥 我在深圳 消费水平非常高的，根本就存不到钱
@Summer、:
大哥 是怎么做到在选择省份后给
self.province = ko.observable();
self.city = ko.observable();
赋值的？
$parent.province,这是什么语法？
@小熊vs: 在<select>那里绑定的 你看文档啊 把所有绑定语法都看一遍
@Summer、: 恩
@Summer、: 大哥 你应该是在二线城市工作吧
@Summer、: 大哥 你用该用过easyui 这个js框架吧
@小熊vs: 用过 网上demo大把 自己慢慢看
@Summer、:
columns: [ [ { field: 'xuanze', title: '全选', width: 100, align: 'center', formatter: function (value, row, index) { return "<Input name='test' value='" + row.ClassId + "' type='checkbox'/>"; } }, { field: 'ClassId', title: '编号', width: 100, align: 'center' }, { field: 'Birhday', title: '图片', width: 100, align: 'center', formatter: function(value, row, index) { return "<img style='width:60px;height:60px;' src='/Content/Images/1.bmp' />"; } }, { field: 'bianji', title: '编辑', width: 100, align: 'center', formatter: function(value, row, index) { return "<a class='btnEnt' onclick= 'loadPage(" + row.ClassId + ")'></a>"; } } ] ],
大哥 绑定表格怎么在标题上面也加上复选框啊？我第一列想在标题上加一个全选的复选框，搞了半天也没实现0.0
@小熊vs: http://www.jeasyui.net/demo/333.html
@Summer、: 大哥在吗
//lamda怎么判断俩个时间类型的变量年月日相等？ temp.Where(m => m.CreateDate.ToString("yyyy-MM-dd") == Convert.ToDateTime(logOperation.CreateDate).ToString("yyyy-MM-dd")); //这样行不通
@Summer、: 大哥 时间类型的数据绑定到EasyUI datagrid 表格上变成 /Date(1468547269653)/ 这种格式的数据 大哥知道是为什么吗？
@Summer、: 大哥 怎么最近都没你的消息了
