扩展javascript通用视图模型。 (昏死)

时间:2012-11-12 08:53:17

标签: javascript jquery knockout.js knockout-mapping-plugin

背景:我对我想要的东西很新,“严肃的javascript / jquery编码”,我以前的尝试可能会被认为是叛国罪:P。

我的问题:我在一些客户端视图模型中注意到了一种模式,并希望将其中一些模式合并到一个.js文件中。

除了我需要创建一组额外的可观察对象的屏幕外,一切似乎都适用于大多数情况,这些屏幕不一定映射到从服务器返回的JS对象。

 var AdminPages = AdminPages || {};  

 AdminPages.SimplePageVM: function (options) {

            var self = this;

            self.hasChanges = function () {};        
            self.isValid = function () {};

            // CRUD Actions
            self.get = function () {
                $.ajax({
                   url: options.getUrl,
                   dataType: 'json',
                   data: !$.isEmptyObject(options.someId) ? { someId: options.someId} : null,
                   success: function (result) {            
                       self.observables = ko.mapping.fromJS(result);
                       ko.editable(self.observables);
                       ko.applyBindings(self, $('form')[0]);
                   },
                   error: function (result) {}
                });
            };
            self.save = function () {};
            self.edit = function () {};
            self.cancel = function () {};

            // Initialise the viewmodel on create
            self.get();                      
  }

我想将以下内容添加到视图模型中。我想我需要创建一个全新的对象,(因为self.observable只能在get函数成功的基础上创建),然后在item bind上添加我的新对象及其属性。

id喜欢添加:

 self.newObject.IsPercentageEvaluation = 
            ko.computed(function () {
                var isPercentage = self.observables.IsPercentageBased() == 'true';    
                  if (isPercentage) {                        
                      self.observables.BalancePercentage('40');
                  } else {
                      self.observables.BalancePercentage('');
                  }
                return isPercentage;
            });

并称之为:

$(function () {
        var obj = {
             IsPercentageEvaluation = ko.computed(...);
        };

        AdminPages.SimplePageVM({
            getUrl: '@Url.Action("Get", "SomeController")',
            editUrl: '@Url.Action("Update", "SomeController")',
            organisationId: '@ViewBag.OrganisationID',
            newObject: obj
        });

} ($));

我想确认这是否是接近这种情况的正确方法?或者,如果有更好的方法,例如使用某种java脚本模式,或者某种程度的东西?

1 个答案:

答案 0 :(得分:1)

我去年春天参与了一个大型项目,我们尝试了一种类似于你正在使用的模式。

有些问题需要考虑 -

  • 在ajax.success函数中,我们通常需要能够修改返回的视图模式。例如,添加ko.computed。我建议你在ko.applybindings之前调用一个可重写的函数。
  • 您需要能够处理应用程序返回数据时出现问题的情况。例如,数据库已关闭或Web服务处于脱机状态。您需要有一种优雅的方式来处理这些情况。我们通过扩展视图模型来实现这一点,以便在不同的属性上返回这些条件。
  • 如果要返回要在表数据中显示的行数据,则可能必须修改ajax.success函数以处理数据数组。我们似乎总是遇到这个问题。

我喜欢你的视图模型。它是一个灵活且可扩展的代码片段。我将在下一个项目中借用它。