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

Javascript ko.mapping在输入字段中显示函数而不是值,javascript,knockout.js,boilerplatejs,Javascript,Knockout.js,Boilerplatejs,我对ko.mapping插件有问题。 我一直在寻找答案,但什么也找不到 我将knockout与样板js结合使用,但我认为这不是问题所在 这是JS: define(function(require){ var Boiler = require('Boiler'), komapping = require('knockout_mapping'); ko.mapping = komapping; var mapping = { 'observe': ['di

我对ko.mapping插件有问题。 我一直在寻找答案,但什么也找不到

我将knockout与样板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 -->

{{nls.label_usarse_en}
{{nls.label_planos}}
{{nls.certificado_calidad}}
它要长得多,但为了简洁起见,我只粘贴两个显示错误的字段。 最后,当我运行它时,会发生以下情况:

以下是我到目前为止所做的尝试:

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;
});
  • 在变量名后使用(),以便它计算并显示可观察对象中的值
这是可行的,但可观测对象会失去它的属性或类似的东西,因为在这之后它不会再次得到更新

  • 为映射定义创建函数。 艾尔·雷迪试过这个:

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

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

希望有人已经解决了这类问题,否则我将不得不手动进行映射(这很有效!)


谢谢

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

解决方案包括在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对象)映射到可观察对象中

附加信息。

  • 淘汰版本:3.2.0(版本3.1.0产生关于ko not的错误 正在定义)
  • KO映射版本:2.4.1
  • jquery版本:1.7.1
  • 下划线-1.3.3_1

谢谢

您是否可以尝试在不粘贴一半应用程序的情况下制作一个可复制的示例?