如何使用 Knockout 和 Requirejs 模块将数据返回到模板？答案

【问题标题】：How do I return data to a template with Knockout and Requirejs modules?如何使用 Knockout 和 Requirejs 模块将数据返回到模板？
【发布时间】：2013-10-24 22:58:15
【问题描述】：

我很难从使用 RequireJS 和 Knockout 的模块返回数据来填充我的单页应用程序的标记。 Knockout 似乎找不到我的数据绑定 observables。

我试图将每个视图保存在一个单独的 js 文件中，但我无法确定我哪里出错了。到目前为止，这是我所拥有的：

/app/app.js

define(function(require) {

require('simrou');

var $ = require('jQuery'),
    ko = require('knockout'),
    videoView = require('videoView');

    var init = function() {

        var viewModel = function() {
            var self = this;
            self.currentPage = ko.observable();
            self.videoView = new videoView();
        }

        var view = new viewModel();

        ko.applyBindings( view );

        _router = new Simrou({
            '/video/:id': [ view.videoView.getVideo ]
        });

        _router.start();

    };

    return {
       init: init
    };

});

/app/videoView.js

define(function(require) {

"use strict";

var $ = require('jQuery'),
    ko = require('knockout');

    return function() { 
        var self = this;
        self.currentPage = ko.observable( 'showVideo' );
        self.currentVideo = ko.observable();
        self.videoData = ko.observableArray([]);
        self.videoList = ko.observableArray([]);

        var getVideo = function( event, params ) {
            // ajax pseudo code
            $.ajax({});

            self.videoData( dataFromAjaxCall );
        }

        return {
            getVideo: getVideo
        };

    };

});

index.html

当我浏览到 /#/video/14 时，我收到以下错误：

    Uncaught ReferenceError: Unable to parse bindings.
    Bindings value: attr: { 'data-video-id': videoData().id }
    Message: videoData is not defined

这是标记：

<section id="showVideo" data-bind="fadeVisible: currentPage()=='showVideo', with: $root">

    <div class="video" data-bind="attr: { 'data-video-id': videoData().id }></div>
</section>

就像我说的那样，我试图将每个视图分开，但我希望对我做错了什么有所启发，或者这是否可能？有没有更好更有效的方法？

【问题讨论】：

看起来您正在将部分 with 绑定到根上下文，这将覆盖当前上下文并将其设置回根，其中 videoData 位于您的 videoView 上下文中。只是出于好奇，你为什么要绑定你的根？
我不太清楚你的意思？我认为 $root 将是 viewModel 对象，然后我从那里遍历。 currentPage() observable 是否与该问题有关？我假设我不能从 videoView.js 中更改 currentPage 值，对吗？
嗯，这取决于。我不确定您如何处理路由或什么被认为是根，什么不是。理解上下文非常重要，但除非您在 jsFiddle 或 jsBin 中复制该问题，否则几乎不可能帮助您理解该视图模型中的 $root 是什么。

标签： templates knockout.js requirejs

【解决方案1】：

videoData 是 $root.videoView 的属性，而不是根模型（您传递给 applyBindings 的那个）的属性。它也是一个observableArray，所以videoData() 只是一个普通数组，即使你得到正确的上下文，你也无法访问它的id 属性，因为作为一个数组，它没有.named 属性。

【讨论】：

您好，感谢您的回复。我想我不明白；那么，在处理我的示例时，它不应该是 observableArray 以便我可以访问属性吗？我认为任何返回的数据都应该在一个数组中。