requierejsでロードされたモジュールでノックアウト観測値を使用すると値を更新できません

私はノックアウトで新しく、requirejsでロードされたモジュールでobservablesを使用する際に問題があります。requierejsでロードされたモジュールでノックアウト観測値を使用すると値を更新できません

コードは非常に単純で、htmlで宣言されたviewmodelを使用していました。 requireを使用してviewmodelをロードすると、observables変数は関数のように動作するので、変数にアクセスするには括弧を使用する必要があります。しかし、私は入力のnothingsを使用して値を変更しようとすると起こる。また、コールバック関数から観測可能な配列に値を追加すると、UIは更新されません。

モジュールをロードし、カッブレスを使わずに可変文字を使用する方法がありますか。

コンストラクタ関数と共有オブジェクトインスタンスを使用しようとしましたが、問題は残ります。

index.htmlを

<div data-bind="component: 'cmp'"></div> 
<script> 
    (document).ready(function() { 
     ko.components.register('cmp', {require: '../Models/cmp'}); 
     ko.applyBindings(); 
    }); 
<script>

/Models/cmp.js

define(['knockout-3.4.0'], function (ko) { 
function MyComponentViewModel(params) { 
    self = this;   
    self.firstName = ko.observable("John"); 
    self.lastName = ko.observable("Doe"); 
    self.sel = ko.observableArray(['France', 'Germany', 'Spain']);  
} 
return { 
    viewModel: MyComponentViewModel, 
    template: { require: 'text!../Models/cmp.html' }     
}; 

});

/Models/cmp.html

<p>First name: <strong data-bind="text: firstName">todo</strong></p> 
<p>Last name: <strong data-bind="text: lastName()">todo</strong></p> 
<select data-bind="options: sel()" class="form-control" id="sel"></select> 
<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName()" /></p>

resullt：

まず名前：関数c（）{（0の場合....

姓：Doeの

出典

2016-05-11 andrezp

私はあなたがindex.htmlファイルにrequire.jsとknockout.jsをロードしている推測しています。 koはindex.htmlで使用されているので、グローバルスコープになければなりません。そうであれば、ノックアウトが2回読み込まれ、あなたの説明と同様の問題が発生する可能性があります。

とにかく、私はあなたのindex.htmlファイルに必要なエントリーポイントを使用し、koを依存関係として挿入します。

<html> 
<head> 
<title>test</title> 
</head> 
<body> 
<script src="require.js"></script> 
<div data-bind="component: 'cmp'"></div> 
<script> 
    require(["knockout-3.4.0"], function(ko) { 
     ko.components.register('cmp', {require: 'Models/cmp'}); 
     ko.applyBindings(); 
    }); 
</script> 
</body> 
</html>

cmp.jsは、プロジェクトのルートに

define(['knockout-3.4.0'], function (ko) { 
    function MyComponentViewModel(params) { 
     self = this;   
     self.firstName = ko.observable("John"); 
     self.lastName = ko.observable("Doe"); 
     self.sel = ko.observableArray(['France', 'Germany', 'Spain']);  
    } 
    return { 
     viewModel: MyComponentViewModel, 
     template: { require: 'text!Models/cmp.html' }     
    }; 
});

cmp.html

<p>First name: <strong data-bind="text: firstName">todo</strong></p> 
<p>Last name: <strong data-bind="text: lastName">todo</strong></p> 
<select data-bind="options: sel()" class="form-control" id="sel"></select> 
<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p>

（htmlファイルのパスの変更に注意してください）、私はindex.htmlを持っています、 knockout-3.4.0.js、require.js、およびtext.js "モデル"サブフォルダ（rootDir \ Models）にcmp.jsとcmp.htmlを含めました。

knockout.jsを大量に使用している場合、knockout.jsをグローバルスコープ（scriptタグ）にロードして、各javascriptモジュールの依存関係として使用しない方が簡単かもしれません。

出典

2016-05-12 02:00:55 mcdermott7run

実際にノックアウトを2回ロードしていて、それが原因です。私のコードを単純化するために、私はimportanの情報（スクリプトの宣言）を除外して、次回にそのことを覚えています。私はknockout.jsを頻繁に使用していますので、私はあなたの助言に従い、グローバルスコープでロードします。 – andrezp

requierejsでロードされたモジュールでノックアウト観測値を使用すると値を更新できません

答えて

関連する問題