0

我遇到了用于淘汰赛的 ko.mapping 插件的问题。我一直在彻底寻找答案，但找不到任何东西。

我将淘汰赛与样板 js 结合使用，但我认为这不是问题。

这是JS：

define(function(require){
var Boiler = require('Boiler'),
    komapping = require('knockout_mapping');

ko.mapping = komapping;

var mapping = {
                'observe': ['disciplina',
                            'numero',
                            'paraUsoEn',
                            'detalleCertificadoCalidad',
                            'comentariosGenerales']
              };

var RequisicionViewModel = function(moduleContext, params, bindingCallback){
    /* Propiedades del modelo */
    var self = this;
    this.disciplinas = ko.observableArray();
    this.requisicion = ko.mapping.fromJS({});

    /* Obtener los valores del WS */

    // Obtener las disciplinas
    moduleContext.requestor.get('/disciplina/').done(function(data){
        self.disciplinas(data);
    });

    // Obtener la plantilla de la requisición
    moduleContext.requestor.get('/requisicion/ZFN-5612').done(function(data){

        ko.mapping.fromJS(data, mapping, self.requisicion);

        self.requisicion.planos = ko.observable("Jola!")

        // Aplicar el binding
        bindingCallback();
    });

    /* Gestión de eventos */
    this.onGuardarClicked = function(){

        console.log(ko.mapping.toJSON(self.requisicion));

    };
};

return RequisicionViewModel;
});

正如你所看到的，我只定义了我想要观察的对象。

这是HTML

<div id="uso-planos-informacion" class="clearfix" data-bind="with:requisicion">
    <div class="control-grp">
        <label for="usarse-en" class="text-solid">{{nls.label_usarse_en}}</label>
        <input id="usarse-en" 
               type="text"
               data-bind="value:paraUsoEn">
    </div>

    <div class="control-grp">
        <label for="planos" class="text-solid">{{nls.label_planos}}</label>
        <input id="planos" 
               type="text">
    </div>

    <div class="control-grp">
        <label for="certificado-calidad" class="text-solid">{{nls.certificado_calidad}}</label>
        <input id="certificado-calidad" 
               type="text"
               data-bind="value:detalleCertificadoCalidad">
    </div>
</div><!--  Termina uso-planos-informacion -->

它要长得多，但为简洁起见，我将仅粘贴 2 个显示错误的字段。最后，当我运行它时，会发生以下情况：

http://i.stack.imgur.com/2Vasm.png

这是我到目前为止所尝试的：

  • 在变量名之后使用 () ，以便它评估并显示可观察对象内的值。

这行得通，但是 observable 失去了它的属性或类似的东西，因为在此之后它不会再次更新。

  • 为映射定义创建函数。已经准备好尝试了这个：

    var mapping = {'paraUsoEn':{create:function(options){return ko.observable(options.data);}}}

并且不起作用。该值不会出现，也无法更新。

希望有人已经解决了这种问题，否则我将不得不手动进行映射（有效！）。

谢谢！

4

1 回答 1

0

好吧，在遵循@Salvador Dali 的建议之后，我正在创建一个更具重现性的示例，通过这样做我可以找到解决方案。因为我使用 require.js 来加载我的库，所以我发现敲除存在问题。尽管在我的 index.jsp 中包含了敲除作为脚本，但它不能正常工作。

该解决方案包括在 main.js（boilertplatejs 文件）中配置敲除，如下所示：

paths:{
        …
        knockout : 'path_to_knockout js',
        knockout_mapping : 'path_to_knockout_mapping js',
        …
},
shim : {
       …
       'knockout_mapping' : {
           deps : ['knockout'],
           exports: 'ko.mapping'
       }
       …
}

如果你愿意，你可以在 index.jsp 中留下敲除参考，如果你已经构建了组件或模块，它将防止它们被破坏。

在您的组件内部，您将需要这个：

var ko = require('knockout');

在您的 viewmodel.js 中，添加以下内容：

var komapping = require('knockout_mapping'),
    ko = require('knockout');

ko.mapping = komapping;

通过这种方式，我能够将 json 数据（由 jquery 映射为普通 JS 对象）映射到 observables。

附加信息。

  • Knockout 版本：3.2.0（版本 3.1.0 产生关于 ko 未定义的错误）。
  • KO 映射版本：2.4.1
  • jQuery版本：1.7.1
  • 下划线-1.3.3_1

谢谢！

于 2014-09-16T04:30:49.187 回答