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

Question

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

我正在尝试将每个视图保存在一个单独的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>

就像我说的那样，我试图让每个观点分开，但我会喜欢对我做错的一些启示，或者这是否可能？有更好的更有效的方法吗？

Answer 1

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