2016-05-04 14 views
0

ちょうどノックアウトで疑問に思うのモデル観察可能な名前を取得する方法はありますか?フィドルで私は観測可能なの名前を得ることができます

https://jsfiddle.net/othkss9s/1/

私は、テーブルを作成するために使用しています観察可能な配列があります。テーブルヘッダーを格納する配列があります。製品オブジェクト自体からテーブルヘッダーを取得し、テーブルヘッダーを格納する別の配列を持つ必要はありません。モデル自体の名前、価格、タグをどうにかして取得するのと同じように?

function Product(name, price, tags) { 
    this.name = ko.observable(name); 
    this.price = ko.observable(price); 
    tags = typeof(tags) !== 'undefined' ? tags : []; 
    this.tags = ko.observableArray(tags); 
} 

function model() { 
    var self = this; 
    this.shoppingCart = ko.observableArray(""); 
    this.headers = ["name", "price", "tags"]; 
}; 

var myViewModel = new model(); 

$(document).ready(function() { 
    ko.applyBindings(myViewModel); 
    myViewModel.shoppingCart.push(
    new Product("Buns", 1.49, ['Baked goods', 'Hot dogs']), 
    new Product("Cups", 2.00, ['Paper Products', 'Drinks']), 
    new Product("Plates", 1.50, ['Paper Products']) 
); 

}); 

ここではhtmlテーブルです。

<table> 
<thead> 
    <tr data-bind='foreach: headers'> 
    <th data-bind='text: $data'></th> 
    </tr> 
</thead> 
    <tbody data-bind='foreach: shoppingCart'> 
    <tr> 
     <td data-bind='text: name'></td> 
     <td data-bind='text: price'></td> 
     <td> 
     <!-- Add a list of tags. --> 
     <ul data-bind='foreach: tags'> 
      <li data-bind='text: $data'></li> 
     </ul> 
     </td> 
    </tr> 
    </tbody> 
</table> 
+0

フィドルをありがとう。あなたは何をしたいかについてもう少し説明できますか?別のデータ構造ですか? – brianlmerritt

+0

ヘッダーの名前(名前、価格、タグ)を別の配列に入れて、テーブルのヘッダー値として表示すると思っていたのは少し冗長でした。名前、価格、タグをモデルから何とか得ることができるかどうかは不思議です。たとえば、角度には{{key}}のようなものがあると思う。そのようなことをするには –

答えて

0

これは、観測可能な特性

function Product(name, price, tags) { 
    this.name = ko.observable(name); 
    this.price = ko.observable(price); 
    tags = typeof(tags) !== 'undefined' ? tags : []; 
    this.tags = ko.observableArray(tags); 
} 

function model() { 
    var self = this; 
    this.shoppingCart = ko.observableArray([]); 
    this.headers = ko.observableArray([]); 
}; 

var myViewModel = new model(); 

$(document).ready(function() { 
    ko.applyBindings(myViewModel); 
    myViewModel.shoppingCart.push(
    new Product("Buns", 1.49, ['Baked goods', 'Hot dogs']), 
    new Product("Cups", 2.00, ['Paper Products', 'Drinks']), 
    new Product("Plates", 1.50, ['Paper Products']) 
); 
    var product = myViewModel.shoppingCart()[0]; 
    for (var key in product) { 
    if (product.hasOwnProperty(key)) { 
     myViewModel.headers.push(key); 
    } 
    } 
}); 

https://jsfiddle.net/brianlmerritt/t2f43qov/7/

PS抽出するための一つの方法です - あなたはthis.Nameなどにフィールド名を変更したいか、単にキーの最初の文字を作るかもしれないがあなたがそれを押す前に大文字にされた

+0

nice、ありがとうございます。 –

+0

同様のことがたくさんある場合は、それをshoppingCartなどのobservableArrayに登録する関数にしてください。タイトルが変更されても、見出しを更新することができます。 – brianlmerritt

+0

注:合理的に最新のブラウザでは、 'Object.keys()'を使用することもできます。 https://jsfiddle.net/t2f43qov/8/ –

関連する問題