使用Knockout.js / RequireJs

时间:2015-06-18 14:39:28

标签: javascript knockout.js requirejs

我有一个我正在使用Knockout开发的应用程序,我正在使用RequireJs,而我正在尝试做的是将某些代码提供给许多不同的页面而不必将代码放在多个文件中......这样的事情:

    function perPageOption(value, display) {
        this.value = value;
        this.display = display;
    }

我的页面中有:

<script data-main="/Scripts/JournalEntriesDetailPage" src="~/Scripts/require.js"></script>

脚本(JournalEntriesDetailPage):

require(['Knockout', 'journalEntiresDetailViewModel', './app/JournalModels', 'domReady'], function (ko, viewModel) {
ko.applyBindings(new viewModel());

});

然后在我的“journalEntiresDetailViewModel”中我有这个:

//per page options
self.perPageOptions = [new perPageOption(10, 10), new perPageOption(20, 20), new perPageOption(50, 50), new perPageOption(100, 100)];

'。/ app / JournalModels'是数组/类所在的位置,当我尝试在我试图“导入”它们的任何页面中使用它们时,它们会出现'undefined'。我很难想出来。我已经查看了requirejs上的多页应用程序的示例,它们似乎对我正在尝试的内容过于复杂。我不明白为什么“domready”在我“需要”它时工作,但是我的文件不起作用。

我也试过这个没有成功:

define(['Knockout'], function (ko) {
    define('EntryType', function () {
    function EntryType(data) {
        this.id = ko.observable(data.ID);
        this.name = ko.observable(data.Name);
        this.color = ko.observable(data.Color);
        this.journaltypeid = ko.observable(data.JournalTypeID);
    }
    return new EntryType();
    });
});

define('EntryType', function () {
    return function EntryType(data) {
        this.id = ko.observable(data.ID);
        this.name = ko.observable(data.Name);
        this.color = ko.observable(data.Color);
        this.journaltypeid = ko.observable(data.JournalTypeID);
    }
});

define(['Knockout'], function (ko) {

return {
    pagePerOption: function(data) {
        this.value = value;
        this.display = display;
    },
    entryType: function(data) {
        this.id = ko.observable(data.ID);
        this.name = ko.observable(data.Name);
        this.color = ko.observable(data.Color);
        this.journaltypeid = ko.observable(data.JournalTypeID);
    }
}
});

1 个答案:

答案 0 :(得分:0)

好吧,我以为我之前尝试过这个,但现在正在运行:

页:

    <script data-main="/Scripts/JournalEntriesDetailPage" src="~/Scripts/require.js"></script>

初始化脚本(JournalEntriesDetailPage):

require(['Knockout', 'journalEntiresDetailViewModel', 'domReady!'], function (ko, viewModel) {
     ko.applyBindings(new viewModel());
});

查看模型脚本(journalEntiresDetailViewModel):

define(['Knockout', './app/JournalModels'], function (ko, model) {
return function () {
    //per page options
    self.perPageOptions = [new model.perPageOption(10, 10), new model.perPageOption(20, 20), new model.perPageOption(50, 50), new model.perPageOption(100, 100)];
    //tons of other code
    }
});

以及&#34;模型中的定义&#34;脚本(JournalModels):

define(['Knockout'], function (ko) {

function _entryType(data) {
    this.id = ko.observable(data.ID);
    this.name = ko.observable(data.Name);
    this.color = ko.observable(data.Color);
    this.journaltypeid = ko.observable(data.JournalTypeID);
}

return {
    entryType: function (data) {
        return new _entryType(data);
    },
    entry: function (data) {
        this.id = ko.observable(data.ID);
        this.createdby = ko.observable(data.CreatedBy);
        var datey = new Date(+data.CreatedDate.match(/\d+/)[0]);
        this.createddate = ko.observable(datey.toLocaleDateString() + " " + datey.toLocaleTimeString());
        this.content = ko.observable(data.Content);
        this.entrytype = ko.observable(new _entryType(data.EntryType));
        this.entrytypename = ko.observable(data.EntryType.Name);
        this.entrytypeid = ko.observable(data.EntryType.ID);
        this.journalid = ko.observable(data.journalid);
    },

    perPageOption: function (value, display) {
        this.value = ko.observable(value);
        this.display = ko.observable(display);
    }
}
});

我需要在模型脚本中返回数据,我认为我尝试过,但我必须没有完成其他必要部分......这是:

define(['Knockout', './app/JournalModels'], function (ko, model) {...

...在视图模型脚本中,所以我可以使用&#34; model&#34;在我的视图模型中,如&#34; model.pagePerOption&#34;。基本上我只是偶然发现正确的组合...因为我正在尝试所有的东西并且改变它以至于我需要的两件事可能不会同时存在直到他们最终成为。

感谢您的回复......:)