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

これが私がこれまでに試したことです：

  • 変数名の後に () を使用して、オブザーバブル内の値を評価して表示します。

これは機能しますが、オブザーバブルはその後再び更新されないため、プロパティなどを失います。

  • マッピングの作成関数を定義します。Al ready これを試しました：

    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 オブジェクトとしてマップされたもの) をオブザーバブルにマップすることができました。

追加情報。

  • ノックアウト バージョン: 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 に答える