KnockoutjsのネストされたViewModel/typescriptによるコンポーネントバインドが機能しません

私はviewModel内のviewModelをノックアウトで動作させるために苦労しています。どんな助けでも大歓迎です。私はtypescriptを使用していて、アドレスコントロールのリストが必要です。それぞれは独自のviewmodelを持っています。KnockoutjsのネストされたViewModel/typescriptによるコンポーネントバインドが機能しません

プロジェクトはただ一つのアドレス制御と完全にうまく働いたが、常に空でのviewmodel子を親コンテナのviewmodelにコントロールを追加し、コンポーネントを使用するとき（すなわち、{}以下の警告文によって示されるように）：

ここ

は、ここに私のapp.ts、https://github.com/richbeales/knockout-test

///<reference path="../node_modules/retyped-knockout-tsd-ambient/knockout.d.ts"/> 

import * as ko from 'knockout'; 
import {AddressViewModel, Address} from './components/paf-widget'; 

ko.components.register('paf-address', { 
    viewModel: AddressViewModel, // { require: 'components/paf-widget' }, 
    template: { require: 'text!components/paf-widget.html' } 
}); 

class AddressesViewModel { 
    addressList: KnockoutObservableArray<AddressViewModel>; 

    constructor() { 
     this.addressList = ko.observableArray<AddressViewModel>(); 
    } 

    addAddress = function() { 
     alert(ko.toJSON(this)); // returns {"addressList":[{}]} 

     var childVm = new AddressViewModel(); 
     alert(ko.toJSON(childVm)); // returns {} 
     childVm.chosenAddress(new Address()); 
     childVm.chosenAddress().Organisation = "Test"; 
     alert(ko.toJSON(childVm)); // returns {} 

     var a = new Address(); 
     a.AddressLine1 = "The Street"; 
     alert(ko.toJSON(a)); // returns {"AddressLine1":"The Street"} 

     this.addressList.push(childVm); 
    } 
} 

var vm = new AddressesViewModel(); 
ko.applyBindings(vm);

で完全なコードであるあなたは

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Bootstrap with jQuery and KnockoutJS</title> 
    <link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="css/style.css"/> 
</head> 
<body> 

<header> 

</header> 

<h1>App</h1> 

Choose an Address 
<pre data-bind="text: ko.toJSON(addressList, null, 2)"></pre> 

<ul data-bind="foreach: {data: addressList, as: 'addrVm'}" style="list-style: none;"> 
    <li class="addressli"> 
     <pre data-bind="text: ko.toJSON(addrVm, null, 2)"></pre> 
     <div data-bind="component: {name: 'paf-address', with: addrVm }"></div> 
    </li> 
</ul> 
<button class="btn btn-primary" data-bind="click: addAddress">Add an address</button> 

<footer> 

</footer> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js" data-main="js/app"></script> 
<script src="require-config.js"></script> 
</body> 
</html>

出典

2017-01-21 Rich

私のindex.htmlですノックアウトを複数回読み込んでいて一貫性がないため、この奇妙な問題があります。

初めてindex.htmlに、次ににrequire.jsを直接入力してください。したがって、AddressViewModelはAddressesViewModelと異なるkoインスタンスを使用するため、これらの奇妙な空のオブジェクトが表示されます。で、

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>

そして正しくpaf-widget.tsでノックアウトが含まれています：

import * as ko from 'knockout';

注

それを修正する最も簡単な方法は、あなたのindex.htmlでKOへの直接参照を削除することです：変更後、ブラウザのキャッシュがクリアで、新しいコードを適切に取得していることを確認してください。

出典

2017-01-21 18:57:38 nemesv

私はそれが何か簡単であることを知っていました。どうもありがとう！ – Rich

KnockoutjsのネストされたViewModel/typescriptによるコンポーネントバインドが機能しません

答えて

関連する問題