0

我在这 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>

问题

  1. 我究竟做错了什么？
  2. 语法错误在哪里？
  3. 我怎样才能让 console.log() 在那里工作？
  4. 也许我的问题有替代方案，也许我误解了 KO.js 的概念？

结论

  1. 我知道里面有数据，mainViewModel.itemPage.loadcontent($.ajax(data))因为 alert() 显示了它，但它没有将值传递给item！
  2. 我是一个新手，完全是新手，如果我现在认为我是一个体面的程序员，我认为我完全是个笨蛋，我开始讨厌 KO.js，但我非常需要它！
  3. 注意：您可以在调试部分看到索引页面工作正常。

调试地点

这是已发布的Web 应用程序

这是单品页面

谢谢你

感谢大家帮助我，我很沮丧，以至于我什至没有看到任何明显的东西，再次感谢！干杯!

4

2 回答 2

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

于 2012-08-13T21:54:43.137 回答
1

  1. 在data-bind元素中，您指的是相对于您在applyBindings()函数中指定的对象的模型。在您的情况下，您调用applyBindings(mainViewModel)了 ，因此在绑定本身中，您引用了它的属性，而不是mainViewModel它本身。

  2. 在您的非工作 HTML 中，<div class="item-container clearfix" data-bind="console.log($root)">似乎很可疑。这是什么绑定？它没有指定要绑定的任何特定属性。

  3. 使用浏览器的开发者工具（Firefox 中的 Firebug，Chrome/IE 中的开发者工具...）查看语法错误。如果绑定有问题，您会在那里看到它们。

于 2012-08-13T22:00:20.847 回答