与 Durandal 的淘汰赛绑定答案

【问题标题】：Knockout binding with Durandal与 Durandal 的淘汰赛绑定
【发布时间】：2014-08-01 00:30:36
【问题描述】：

我正在使用 durandal 创建一个 Web 应用程序。我正在使用敲除将值绑定到来自服务器的页面。我在将淘汰赛 observableArray 绑定到页面时遇到问题，它是一个有点复杂的数组。

我的 observableArray 看起来像，

在视图中，

        <ul data-bind="foreach: products">
            <li><span data-bind='text: product' /></li>
        </ul>

没有错误并且不工作。

js 代码。

    define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
        var system = require('durandal/system');
        var vm = {
            activate: activate,
            attached: viewAttached,
            products: ko.observableArray([])
        };
        return vm;

        function activate() {       
            var that = this;
            var pdts;
            var recs;
            var recipeJson = [];
            http.get('http://***/Umbraco/Api/Products/GetAllProducts').then(function (response) {
                pdts = response;
                http.get('http://***/Umbraco/Api/Recipes/GetAllRecipes').then(function (response1) {
                    recs = response1;
                    $.each(pdts, function (i, item) {
                        var json = [];
                        $.each(recs, function (j, jtem) {
                            if (item.DocumentTypeId == jtem.BelongstoProduct) {                           
                                json.push(jtem);                            
                            }
                        });

                        jsonitem = {}
                        jsonitem["product"] = item.ProductName;
                        jsonitem["recipes"] = json;
                        recipeJson.push(jsonitem);

                    });
                    that.products = recipeJson;
                    return that.products;
                });
            });                                                           
        }

        function viewAttached(view) {
            $("#accordion > li > div").click(function () {
                if (false == $(this).next().is(':visible')) {
                    $('#accordion ul').slideUp(300);
                }
                $(this).next().slideToggle(300);
            });
        }
    });

请帮忙，谢谢。

【问题讨论】：

不要在激活之前返回 vm，而是在返回 vm 之后附加激活和视图附加 vm。
@Akhlesh 这不是必需的，因为函数声明被提升到了作用域的顶部。

标签： javascript knockout.js durandal

【解决方案1】：

当你写作时

that.products = recipeJson;

您将 observableArray 替换为普通数组。你应该写

that.products(recipeJson);

相反，或者只是将每个项目直接推送到可观察数组中，而不是通过recipeJson，使用that.products.push(jsonItem)。

【讨论】：