Question

我遇到了针对淘汰赛的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中的值。

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

为映射定义创建函数。 Al准备尝试这个：

var mapping = {'paraUsoEn'：{create：function（options）{return ko.observable（options.data）;}}}

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

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

谢谢！

Answer 1

嗯，按照@Salvador Dali的建议，我正在创建一个更可重复的例子，通过这样做我可以找到解决方案。由于我使用require.js加载我的库，我发现敲除有问题。虽然在我的index.jsp中将knockout作为脚本包含在内，但它无法正常工作。

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

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

如果需要，您可以将knockout引用留在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 Mapping版本：2.4.1
jquery版本：1.7.1
下划线-1.3.3_1

谢谢！

ko.mapping在输入字段而不是值中显示函数

1 个答案: