为什么我的视图模型不起作用
Why isn't my viewModel working
我正在为此苦苦挣扎 3 天,无法弄清楚为什么第一个 viewModel 有效但第二个视图模型不起作用,它甚至不允许我控制台.log() 任何东西。
我的观点 模型和 ko 绑定:
// KO View Models
var indexViewModel = {
item: ko.observableArray([]),
cat: ko.observableArray([]),
loadcontent: function () {
alert("inside index function");
$.ajax({
url: '/api/item/all',
dataType: 'json',
success: function (data) {
var getArray = [];
$.each(data, function (index, item) {
getArray[index] = item;
});
indexViewModel.item(getArray);
}
});
$.ajax({
url: '/api/category/all',
dataType: 'json',
success: function (data) {
var getArray = [];
$.each(data, function (index, item) {
getArray[index] = item;
});
indexViewModel.cat(getArray);
}
});
}
};
var dataReal = null;
var itemViewModel = {
item: ko.observableArray([]),
loadcontent: function (getID) {
alert(getID);
$.ajax({
url: '/api/item/details/' + getID,
dataType: 'json',
success: function (data) {
var getArray = [];
$.each(data, function (index, item) {
getArray[index] = item;
});
itemViewModel.item(getArray);
dataReal = data;
},
error: function (xhr, status) {
switch (status) {
case 404:
alert('File not found');
break;
case 500:
alert('Server error');
break;
case 0:
alert('Request aborted');
break;
default:
alert('Unknown error ' + status);
}
}
});
}
};
var mainViewModel = {
indexPage: indexViewModel,
itemPage: itemViewModel
};
ko.applyBindings(mainViewModel);
我的工作 HTML:
<div id="index-content" data-bind="init: mainViewModel.indexPage.loadcontent(), with: mainViewModel.indexPage">
<div class="item-list" data-bind="foreach: item">
<div class="item-container clearfix">
<div class="item-content clearfix">
<div class="title" data-bind="text: Title">
</div>
<div class="left-side clearfix">
<div class="item-image" data-bind="style: { backgroundImage: 'url(content/u/'+Image+')' }">
</div>
<div class="item-descr">
<div class="body" data-bind="text: Body">
</div>
<div class="item-more-details">
Vairāk...
</div>
</div>
</div>
HTML女巫甚至忽略了我的控制台.log()调用:
@{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
int id = ViewBag.id;
}
<div id="item-details-content">
<input type="hidden" id="item-id" value="@id" data-bind=""/>
<div class="item-list" data-bind="init: itemPage.loadcontent(@id), with: itemPage.item">
<div class="item-container clearfix" data-bind="init: console.log($root)">
<div class="item-content clearfix">
<div class="title" data-bind="text: Title">
</div>
<div class="left-side clearfix">
<div class="item-image" data-bind="style: { backgroundImage: 'url(content/u/'+Image+')' }">
</div>
<div class="item-descr">
<div class="body" data-bind="text: Body">
</div>
<div class="item-more-details">
Vairāk...
</div>
</div>
</div>
问题
- 我做错了什么?
- 语法错误在哪里?
- 如何让控制台.log()在那里工作? 也许我
- 的问题有另一种选择,也许我误解了 KO.js 的概念?
结论
- 我知道
mainViewModel.itemPage.loadcontent($.ajax(data))
里面有数据,因为 alert() 显示了它,但它不会将值传递给item
!
我 - 是一个新手,完全的新手,如果我认为我现在是一个体面的程序员,我认为我完全是愚蠢的,我开始讨厌KO.js,但我非常需要它!
- 注意:您可以在调试部分看到索引页工作正常。
调试地点
这是已发布的 Web 应用程序
这是单个项目页面
谢谢
谢谢大家对我的帮助,我很沮丧,我什至没有看到任何明显的,再次感谢!干杯!
1)乍一看,我注意到你的HTML绑定指的是mainViewModel。例如:
data-bind="init: mainViewModel.itemPage.loadcontent(@id), with: mainViewModel.itemPage.item
应该可能是
data-bind="init: itemPage.loadcontent(@id), with: itemPage.item
您已经绑定到主视图模型
2) 对于调试,请使用此选项查看视图中绑定的内容。
<pre data-bind="text:ko.toJSON(yourViewModelGoesHere, null, 2)"></pre>
3) 返回的数据不是数组,尽管您将其视为数组。
$.ajax({
url: '/api/item/details/' + getID,
dataType: 'json',
success: function (data) {
var getArray = [];
$.each(data, function (index, item) {
getArray[index] = item;
});
itemViewModel.item(getArray);
dataReal = data;
},
如果您在 http://jsfiddle.net 创建样品,我们可以为您提供更多帮助。
-
在
data-bind
元素中,您相对于在applyBindings()
函数中指定的对象来引用模型。在您的情况下,您调用了applyBindings(mainViewModel)
,因此在绑定本身中,您引用了它的属性,而不是mainViewModel
本身。 -
在您的非工作 HTML 中,
<div class="item-container clearfix" data-bind="console.log($root)">
似乎很可疑。这是什么绑定?它不指定要绑定的任何特定属性。 -
使用浏览器的开发者工具(Firefox 中的 Firebug、Chrome/IE 中的开发者工具...)查看语法错误。如果绑定有问题,您将在那里看到它们。
相关文章:
- 角度无线电按钮ng模型不起作用
- 初始化ng模型时,Angular ui选择占位符不起作用
- 角度去抖动(ng模型选项)不起作用
- ng模型在$(element).clone()之后不起作用
- 如果条件在代码点火器的模型中不起作用
- 挖空.js嵌套视图模型不起作用
- 为什么我的视图模型不起作用
- 使用嵌套ng中带有单选按钮的ng模型重复不起作用
- 当使用jQuery设置值时,ng模型不起作用
- 有角度的ng模型在ng重复中不起作用
- Select选项包含在验证模型MVC时不起作用
- 自定义主干.模型操作不起作用
- ArangoDB Foxx 模型日期时间戳不起作用
- 角度ng模型不起作用
- jQuery 模型弹出窗口不起作用
- 猫鼬导入模型不起作用
- 以编程方式更改模型时,ngChange 不起作用
- 角度JS模型更新不起作用
- 使用 JavaScript 复制模型的输入文本不起作用
- 在使用具有隔离作用域的指令时保存模型值不起作用