5

私は次のフィドルを持っています。配列cars内の要素ごとに、親メソッドlowestMpgMsgを呼び出そうとしています。次のバインディングを試してみましたが、うまくいきませんでした:

data-bind="text: lowestMpgMsg()"
data-bind="text: parent.lowestMpgMsg()"
data-bind="text: parent().lowestMpgMsg()"
data-bind="text: parent().lowestMpgMsg"

ありがとうございました！

これが私のhtmlです

<div class="container">
<div id="template-container" data-template="template" data-bind="source: cars"></div>
<script id="template" type="text/x-kendo-template">
    <div>
        <span data-bind="text: brand"></span> - 
        <span data-bind="text: mpg"></span> - 
        <span data-bind="text: lowestMpgMsg()"></span> - 
    </div>
</script>

そしてここに私のjavascriptがあります

var viewModel = kendo.observable({
    cars: [
        {brand: "Toyota", mpg: 22},
        {brand: "Mini", mpg: 32},
        {brand: "Honda", mpg: 23}
    ],
    lowestMpgMsg: function(e) {
        var sorted = this.cars.sort(function(a, b) {
            return a.mpg - b.mpg > 0;
        });

        return e.mpg > sorted[0].mpg ? "no" : "yes";
    }
});

kendo.bind($("#template-container"), viewModel);
4

1 に答える 1

7

簡単に言うと、そうする必要はありません。プロトタイプ チェーンがどのように機能するかを連想させるように、親の親メソッドが自動的に呼び出されます。より長い答えは、正しい構文があなたの質問に記載されているものではなく、コードの使用方法に微妙なエラーがあるということですthis。

まず、バインディングは javascript ではないことに注意してください。ドキュメントの MVVM の概要では、バインディングでメソッドを呼び出すことができないことが明確にされているため、括弧を含むものは正当な構文にはなりません。できたとしても、car インスタンスから親メソッドを 2 回呼び出す必要があります。

var car = viewModel.cars[0];
var cars = car.parent();
var model = car.parent().parent();
var lowestFn = model.lowestMpgMsg.bind(model); //the bind makes this refer to the intended object

これは、次のようなものにバインドするものが必要になることを意味しますparent().parent().lowestMpgMsg()

良いニュースは、data-bind="text: lowestMpgMsg"あなたが望むように動作することです。アイテムのparent().parent().lowestMpgMsg(). 基本的な親チェーンの動作を確認するには、テンプレートを次のように変更します。

    <script id="template" type="text/x-kendo-template">
        <div>
            <span data-bind="text: brand"></span> - 
            <span data-bind="text: mpg"></span> - 
            <span data-bind="text: lowestMpgMsg"></span> - 
        </div>
    </script>

そしてモデルへ

    var viewModel = kendo.observable({
        cars: [
            {brand: "Toyota", mpg: 22},
            {brand: "Mini", mpg: 32},
            {brand: "Honda", mpg: 23}
        ],
        lowestMpgMsg: function(e) {       
            return Math.random();
        }
    });

では、なぜあなたのlowestMpgMsg仕事がうまくいかないのかを考えてみましょう。まず、メソッドがビューモデルで例外をスローしますが、ラップされたオブジェクトでは例外をスローしないことに注意してください。

viewModel.lowestMpgMsg({mpg:15}); //throws exception

var notWrapped = {
    cars: [
        {brand: "Toyota", mpg: 22},
        {brand: "Mini", mpg: 32},
        {brand: "Honda", mpg: 23}
    ],
    lowestMpgMsg: function(e) {
        var sorted = this.cars.sort(function(a, b) {
            return a.mpg - b.mpg > 0;
        });
        return e.mpg > sorted[0].mpg ? "no" : "yes";
    }
}
notWrapped.lowestMpgMsg({mpg:15}); //no exception

がlowestMpgMsgバインド中に呼び出されると、 はthis.carsと同じオブジェクトを参照し、メソッドを持たない型です。viewModel.carsinstanceofkendo.data.ObservableArraysort

最後に、依存関係が変更されたときに MVVM フレームワークがそれを更新することを認識できるように、計算フィールドには必ず get メソッドを使用してください。

于 2014-06-10T03:24:27.087 に答える