0

ノックアウト スクリプトをより整理しておきたいのですが、さらに、偶然に 2 つの関数に同じ名前を付けないようにしたいと考えています。だから私は同じ関数でviewModelをネストできるかどうか疑問に思っていました（私はそれを本当に単純に保ちました）：Fiddle

ここにHTMLがあります

<p>First name: <strong data-bind="text: other.firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: other.lastName">todo</strong></p>
<p>Full name: <strong data-bind="text: other.fullName">todo</strong></p>

そしてJS：

function AppViewModel() {
    var self = this;
    self.other = {
        firstName: ko.observable("Bert"),
        lastName: ko.observable("Bertington"),
        /*fullName: ko.computed(function(){
            return this.firstName + " " + this.lastName;
            }, this)*/

        }
}

これは問題なく動作しますが、ko.computed のコメントを外すとクラッシュします。このようにノックアウトを整理する方法はありますか? 計算されたクラッシュが発生するのはなぜですか?

編集：問題＃2

次のようなフォームがある場合:

<form data-bind="submit: other.otherSubmit" data-ajax="false">
    <button type="submit">Submit</button>
</form>

そして、次のように送信用のハンドラーを追加します。

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    function AppViewModel() {
        var self = this;
        self.other = new function(){     
            var self = this;
            self.firstName = ko.observable("Bert");
            self.lastName = ko.observable("Bertington");
            self.fullName = ko.computed(function(){            
                return self.firstName() + " " + self.lastName();
                });
            self.otherSumbit = function(){}
            }
    }

// Activates knockout.js
ko.applyBindings(new AppViewModel());

エラーコンソールがこれを返すのはなぜですか:

送信バインディングの値は関数でなければなりません

4

4 に答える 4

2

これを試すことができます：

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    function AppViewModel() {
        var self = this;
        self.other = new function(){     
            var self = this;
            self.firstName = ko.observable("Bert");
            self.lastName = ko.observable("Bertington");
            self.fullName = ko.computed(function(){            
                return self.firstName() + " " + self.lastName();
                });        
            }
    }

// Activates knockout.js
ko.applyBindings(new AppViewModel());
于 2013-02-21T02:05:30.590 に答える
1

最初のケースの問題は、そのコンテキストでthisビューモデルを参照することでした。オブジェクト リテラル内では、オブジェクトはまだ存在していないため、計算されたオブザーバブルをそのように設定することはできませんでした。作成後にオブジェクトに追加する必要がありました。

次のようにします (これは醜いです):

function AppViewModel() {
    var self = this;
    self.other = {
        firstName: ko.observable('Bert'),
        lastName:  ko.observable('Bertington')
    };
    self.other.fullName = ko.computed(function() {
        return this.firstName() + ' ' + this.lastName();
    }, self.other);
}

または、次のように (2 番目の例で同様に行ったように):

function AppViewModel() {
    var self = this;
    self.other = new function() {
        this.firstName = ko.observable('Bert');
        this.lastName = ko.observable('Bertington');
        this.fullName = ko.computed(function() {
            return this.firstName() + ' ' + this.lastName();
        }, this);
    };
}

もちろん、上記の例を書く方法は他にもありますが、私の言いたいことは理解できます。

2 番目の例では、関数のスペルが間違っています。ビューモデルでは、ビューに名前が付けられotherSumbitていましたotherSubmit。

于 2013-02-21T02:51:07.700 に答える
0

ノックアウトを使用して VM を整理するために使用する 1 つの手法:

//load view
    $.get(url, function(view){
        $("#content').html(view);
        ko.applyBindings(new myVM(), $('#content')[0]);
    })
于 2013-02-21T02:28:10.753 に答える
0

この種のソリューションのソリューションを探している人は、次の方法を試してください

HTML ビュー

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="container1">
        <ul>
            <li >Container1 item</li>
            <!-- ko foreach: myItems -->
            <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <div id="container2">
        <ul>
            <li >Container2 item</li>
            <!-- ko foreach: myItems -->
                <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/knockout-3.0.0.js"></script>
    <script src="js/DataFunction.js"></script>
    <script src="js/Container1ViewModel.js"></script>
    <script src="js/Container2ViewModel.js"></script>

</body>
</html>

このビューでは、2 つの別個の JavaScript ファイルで id=container1 と id=container2 の 2 つのビュー モデルを作成しています。

Container1ViewModel.js

function Container1ViewModel()
{
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("ABC");
    self.myItems.push("CDE");

}

Container2ViewModel.js

function Container2ViewModel() {
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("XYZ");
    self.myItems.push("PQR");

}

次に、これら 2 つのビューモデルが DataFunction.js で個別のビューモデルとして登録された後

var container1VM;
var container2VM;

$(document).ready(function() {

    if ($.isEmptyObject(container1VM)) {
        container1VM = new Container1ViewModel();
        ko.applyBindings(container1VM, document.getElementById("container1"));
    }

    if ($.isEmptyObject(container2VM)) {
        container2VM = new Container2ViewModel();
        ko.applyBindings(container2VM, document.getElementById("container2"));
    }
});

このように、個別の div に任意の数のビューモデルを追加できます。ただし、登録された div 内の div 用に別のビュー モデルを作成しないでください。

于 2015-08-12T19:32:40.880 に答える