将淘汰赛 observables 作为参数传递答案

【问题标题】：Passing knockout observables as parameters将淘汰赛 observables 作为参数传递
【发布时间】：2013-04-29 13:44:42
【问题描述】：

简单的要求 - 我的视图模型中的一个可淘汰的可观察数组，需要填充到数据上下文模块中。 2个不同的模块是问题的核心。

基本问题是，如果一个可淘汰的 observable 是一个函数，如何将它作为参数传递，以及这样一个变量的作用域是什么。它是全局的，因为它是可观察的吗？我使用的模式直接来自 John Papa 的 SPA Jumpstart 课程，但似乎对我不起作用，除非我在某处错过了括号或返回语句。我尝试了许多不同的组合。

使用 JPs hot towel mvc 模板，但这与我的查询无关。

这是视图模型代码

define(['dataContext'], function (datacontext) {
    var summary = ko.observableArray();
    var initialise = false;

    var prodModel= {
        activate: activate,
        title: 'Home View',
        summary:summary
    };

    return prodModel;



    //#region Internal Methods
    function activate() {
        if (!initialise)
        {

            initialise = true;
            return getSummary();


        }

        return;

    }
    function getSummary () {

   // Go to the context and populate the observable array
     return   datacontext.getProductionSummary(summary);

    };
    //#endregion
});

以下是datacontext模块。尝试将 javascript 数组分配给 getProductionSummary 方法中的敲除 observable 数组时发生错误。

值得一提的是，我也尝试使用 pushAll 实用程序功能。

填充可观察数组的唯一方法是直接推入它，但即使我这样做了，调用 viewmodel 代码中的值也没有像普通变量所期望的那样。

 define(['config','services/logger'],
function (config,logger) {


    var getProductionSummary = function (summaryObservableArray) {

     //Call Web API
        var query = breeze.EntityQuery.from('getSummary');
        return manager.executeQuery(query).then(querySucceeded).fail(queryFailed);

    //Yay got the data.. lets play
        function querySucceeded(data) {
            var summary = [];
            for (var i = 0; i < data.results.length; i++) {
                summary.push(data.results[i]);
            }


            return summaryObservableArray(summary);

        }


    };

    var datacontext = { getProductionSummary: getProductionSummary };
    return datacontext;



    // #region Internal functions  

    var manager = createBreezeManager();
    function createBreezeManager () {


        var mgr= new breeze.EntityManager(config.dataEndPoints);

        return mgr;
    };

    function queryFailed(error) {

        logger.log(error.message, null, 'dataContext', true);
    }
//#endregion





});

这是视图中引发错误的位

  <!--ko foreach:summary-->
                    <tr>

                        <td><span data-bind="text: summary().Count"></span></td>
                        <td><span data-bind="text: summary().Percentage"></span></td>
                    </tr>
                    <!--/ko-->

错误是

Unable to parse bindings.↵Message: ReferenceError: summary is not defined;↵Bindings value: text: summary().Count

【问题讨论】：

KO observable 变量（或属性）的作用域与any变量（或属性）的作用域相同。另外，不要忘记解释“错误”是什么。
是的，错误是什么？但我还要说，返回summaryObservableArray(summary) 是没有意义的。这是因为一个可观察的简单函数在写入时会执行 return this;，在这种情况下将是 window 对象。
这一行var manager = createBreezeManager(); 没有被执行，manager.executeQuery(query) 应该抛出错误。
道歉..错误是无法解析绑定。↵消息：ReferenceError：未定义摘要；↵绑定值：文本：摘要（）。计数这是在我进行数据绑定的视图模型中到summary().Count 和summary().Percentage。 Breeze 正在按应有的方式执行。我可以看到返回的值我什至可以在 datacontext 中看到我的 observablearray 中的值，但是绑定失败了。
我的意思是错误在视图中......而不是视图模型。

标签： knockout.js breeze

【解决方案1】：

@xdenser 已正确识别出您代码中最重要的问题。

返回数据上下文； ... // 因为你返回了，所以永远不会执行；经理未定义。 var manager = createBreezeManager();

您没有说明错误。我们敢打赌，当您在视图模型中调用 getProductionSummary 时，您会收到“经理未定义”错误。将行向上移动（最好靠近 datacontext 的顶部），你会没事的：

var manager = createBreezeManager(); ... 返回数据上下文；

这一切似乎有点折磨。为什么不取消createBreezeManager 并开始如下？

var manager =新的微风.EntityManager(config.dataEndPoints);

你还有一个有点过于复杂的querySucceeded，它可能就像这样简单：

函数 querySucceeded(data) { summaryObservableArray(data.results); }

【讨论】：

感谢沃德的回复。微风代码执行良好。返回值并填充数据上下文中的 KO 数组，但视图上的绑定失败，错误摘要未定义。我在之前的评论中添加了完整错误。我在successed函数中填充数组的唯一原因是我认为将data.results直接添加到observable中更昂贵，因为每个项目都会触发一个通知。我错了吗？
注意将项目推入可观察数组的危险是正确的。幸运的是，data.results 已经是一个数组。通过直接使用它，您可以执行与构造 summary 并注入它时相同的操作。

【解决方案2】：

data-bind="text: summary().Count == 错误 data-bind="text: Count== RIGHT

Duh.. 被错误语句抛出。不过感谢大家的回复。

【讨论】：

【解决方案3】：

<!--ko foreach:summary-->
         <tr>
            <td><span data-bind="text: Count"></span></td>
            <td><span data-bind="text: Percentage"></span></td>
         </tr>
<!--/ko-->

这是正确的观点

foreach 内部的绑定上下文是数组项。仍然不明白你的 dataContext 模块是如何工作的。怀疑您显示的不是实际代码。

【讨论】：