使用 Knockout.js / RequireJs 从视图模型中分离 javascript "classes" 或 "modules"

Question

我有一个正在使用 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' 是 arrays/classes 所在的位置，当我尝试在我尝试 [=42= 的任何页面中使用它们时，它们出现 'undefined' ] 他们在地。我很难弄清楚这一点。我已经查看了 requirejs 上的多页面应用程序的示例，它们对于我正在尝试做的事情来说似乎太复杂了。我不明白为什么 "domready" 在我 "require" 时工作，但我的文件不工作。

我也试过了，但没有成功：

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);
    }
}
});

Answer 1

好的，我想我以前试过这个，但现在可以了：

页数：

    <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
    }
});

以及 "models" 脚本 (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);
    }
}
});

我需要 return 模型脚本中的数据，我想我已经尝试过了，但我一定还没有完成其他重要部分...这是：

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

... 在视图模型脚本中，这样我就可以在我的视图模型中使用 "model"，例如 "model.pagePerOption"。基本上，我只是不得不偶然发现正确的组合……因为我尝试了所有的东西并进行了如此多的改变，以至于我需要的两件事可能不会同时出现，直到它们最终出现。

感谢您的回复...:)

使用 Knockout.js / RequireJs 从视图模型中分离 javascript "classes" 或 "modules"

Separating javascript "classes" or "modules" from View Model with Knockout.js / RequireJs

javascript

requirejs

knockout.js