Question

我正在为这3天而苦苦挣扎，无法理解为什么第一个viewModel正在工作但第二个不是，它甚至不允许我使用console.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女巫甚至忽略了我的console.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>

问题

我做错了什么？
语法错误在哪里？
如何让console.log（）在那里工作？
也许有一个替代我的问题，也许我误解了KO.js的概念？

结论

我知道mainViewModel.itemPage.loadcontent($.ajax(data))中有数据，因为alert（）会显示它，但它没有将值传递给item！
我是一个新手，总新手，如果我认为我现在有点像程序员，我觉得我总是笨笨，我开始讨厌KO.js，但我非常需要它！
注意：您可以在调试部分看到索引页面工作正常。

DEBUG PLACE

此处发布了web application

这是single item page

谢谢

感谢大家帮助我，我非常沮丧，甚至没有看到更明显的，再次感谢！干杯！

Answer 1

1）乍一看，我注意到你的HTML绑定指的是mainViewModel。例如：

data-bind="init: mainViewModel.itemPage.loadcontent(@id), with: mainViewModel.itemPage.item

应该是

data-bind="init: itemPage.loadcontent(@id), with: itemPage.item

您已经绑定到mainViewModel

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创建样本，我们可以为您提供更多帮助。

Answer 2

在data-bind元素中，您指的是您的模型相对于您在applyBindings()函数中指定的对象。在您的情况下，您调用了applyBindings(mainViewModel)，因此在绑定本身中，您可以引用其属性，而不是mainViewModel本身。
在您的非工作HTML中，<div class="item-container clearfix" data-bind="console.log($root)">似乎很可疑。这有什么约束力？它没有指定要绑定的任何特定属性。
使用浏览器的开发者工具（Firefox中的Firebug，Chrome / IE中的开发人员工具......）查看语法错误。如果绑定存在问题，您将在那里看到它们。

为什么我的viewModel不起作用

问题

结论

DEBUG PLACE

谢谢

2 个答案: