ko.mapping在值插入的輸入字段中顯示功能

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

到目前為止，這是我嘗試過的方法：

• 在變量名稱后使用（），以便它求值並顯示可觀察對象內部的值。

這是可行的，但是可觀察對象失去了它的屬性或類似的東西，因為在此之后它不會再次更新。

• 定義映射的創建函數。 Al准備嘗試以下方法：

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

並且不起作用。 該值不出現，也無法更新。

希望有人解決了此類問題，否則我將不得不手動進行映射（可行！）。

謝謝！

Answer 1

好吧，在遵循@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對象）映射到可觀察對象中。

附加信息。

• 淘汰賽版本：3.2.0（版本3.1.0產生有關ko未被定義的錯誤）。
• KO映射版本：2.4.1
• jQuery版本：1.7.1
• 下划線-1.3.3_1

謝謝！