Knockout.js 用户单击链接后的Knockoutjs绑定
我是javascript/jquery新手,正在学习knockoutjs。我被这个问题困住了。我的书页上有两本书。第一个创建了一个链接,用户可以单击该链接查看有关该项目的更多信息。该链接包含一个传递给ajax调用的ID,ajax调用将数据返回给第二个ko可观察对象 问题是,第二个可观察数据在页面上总是显示为“未定义”。然而,如果我在创建可观察对象的代码中放一个console.log(数据),数据就在那里。类似地,在Fiddler中,ajax调用所请求的json被很好地发回 我确信这与我如何绑定可观察对象有关,但我尝试了几种不同的方法(使用数组、不使用数组等),但都没有效果。任何帮助或指点都将不胜感激。这似乎是个简单的问题,但我已经尝试了所有的方法,却无法让它发挥作用Knockout.js 用户单击链接后的Knockoutjs绑定,knockout.js,Knockout.js,我是javascript/jquery新手,正在学习knockoutjs。我被这个问题困住了。我的书页上有两本书。第一个创建了一个链接,用户可以单击该链接查看有关该项目的更多信息。该链接包含一个传递给ajax调用的ID,ajax调用将数据返回给第二个ko可观察对象 问题是,第二个可观察数据在页面上总是显示为“未定义”。然而,如果我在创建可观察对象的代码中放一个console.log(数据),数据就在那里。类似地,在Fiddler中,ajax调用所请求的json被很好地发回 我确信这与我如何绑定可
$(document).ready(function () {
var da = new firstViewModel();
ko.applyBindings(da, document.getElementById('da'));
var eq = new secondViewModel();
//Binding the second observable here but not using it yet as it depends on getting data from the //first (da) in order to work.
ko.applyBindings(eq, document.getElementById('eqdetails'));
});
function da(data) {
var self = this;
self.eqid = ko.observable(data.eqid);
self.modelname = ko.observable(data.modelname);
}
function firstViewModel() {
// Data
var self = this;
self.da = ko.observableArray([]);
self.getdetails = function (da) {
selectedid = da.eqid();
//Call second observable when user clicks on link.
var eq = new secondViewModel();
eq.geteqdetails();
}
};
};
function eqview(data) {
console.log('in eqview ' + data); //This works, but data is still undefined in html
var self = this;
self.modelname = ko.observable(data.modelname);
self.number = ko.observable(data.number);
};
function secondViewModel() {
var self = this;
self.eqviews = ko.observableArray([]);
self.geteqdetails = function () {
$.ajax("../Process/GetEqDetails", {
type: "post",
contentType: "application/json",
data: JSON.stringify({ EqID: selectedid }),
success: function (result) {
console.log('in ajax call ' + result.data);
var mappedequipmentview = $.map(result, function (item) { return new eqview(item) });
self.eqviews(mappedequipmentview);
}
});
};
以下是页面的HTML:
<div id="da" class="span3">
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Model</th>
<th>ID</th>
</tr>
</thead>
<tbody data-bind="template: { name: 'datemplate', foreach: da }">
</tbody>
</table>
<script id="datemplate" type="text/html">
<tr>
<td><span data-bind="text: modelname"></span></td>
<td>
<button type="button" class="btn btn-link" data-bind="click: $root.getdetails" title="View">
<span data-bind="text: eqid"></span></button>
</td>
</tr>
</script>
</div>
<div class="span6">
<div class="span1">
<table class="table table-bordered table-condensed" id="eqdetails">
<tbody >
<tr>
<td><span data-bind="text: $data.modelname "></span></td>
</tr>
<tr>
<td><span data-bind="text: $data.number "></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
模型
身份证件
我认为您显示的代码中有几个错误
- 文档准备好后,您将实例化“secondViewModel”,并对其应用绑定。这很好,但您从未使用过它:您正在代码的第33行实例化一个新模型。你不应该那样做。为模型应用绑定后,如果要更改其中的数据,必须保留对此模型的引用。Knockout有点神奇,但没有那么多:它不知道必须将您创建的每个secondViewModel绑定到“eqdetails”表
- 在代码的第62行,您引用了一个“selectid”变量,该变量在“geteqdetails”函数的上下文中不存在。您应该将“selectid”作为参数传递给“geteqdetails”函数,以便能够引用它
- 最后,我不确定您是否需要两个视图模型。我认为这会使您的代码更难理解和维护。我可能只使用一个视图模型。这样,您就不必保留对secondViewModel的引用来更新其数据。或者,另一种方法是使用路由
new secondViewModel()
将生成secondViewModel的新实例,但它永远不会替换您已经绑定的实例。放置ko.applyBindings(eq,document.getElementById('eqdetails'))时会发生什么代码>在语句下方var eq=new secondViewModel()代码>在firstViewModel
中?不幸的是,这不起作用。我也遇到了同样的问题,“eqview函数”中的“console.log”起作用,但在页面上我得到了“undefined”。谢谢你的建议。我实现了第1点和第2点,这些确实有帮助,但没有解决第二个视图模型在页面上未定义的问题(尽管有数据)。我对第3点很感兴趣,但没能找到一种将两者结合起来的好方法。由于所有让这两个视图模型工作的尝试都没有成功,我决定只使用一个视图模型,然后在用户单击后使用jquery获取详细信息。谢谢你的评论。你能发布一个JSFIDLE来展示你的解决方案吗?我不确定使用jQuery是否是最好的解决方案。这里有一个帖子:如果这提供了足够的信息,请告诉我。谢谢