KnockoutJS失去視圖模型

我在驗證概念時遇到了一些麻煩。我正在嘗試做的是當點擊一個按鈕時出現一個jQuery對話框。對話內容綁定到視圖模型，對話框調用一個json服務來檢索一些數據來填充該視圖模型。KnockoutJS失去視圖模型

運行到兩個問題的代碼，我在這裏：如果股利是從最初的頁面加載

的vmAccount視圖模型在任一SearchForCustomerAccounts或未定義可見

的vmAccount視圖模型只會結合儘管是一個全局變量，以那些

$(function() { 
 

 
    var vmAccount = function() { 
 
    var self = this; 
 
    this.Accounts = ko.observableArray(); 
 
    this.Name = ko.observable('Jimmy'); 
 
    }; 
 

 
    function DisplayDialog() { 
 

 
    $("#Dialog").dialog({ 
 
     resizable: false, 
 
     height: 140, 
 
     modal: true, 
 
     buttons: { 
 
     "Search": function() { 
 
      SearchForCustomerAccounts(); 
 

 
     }, 
 
     Cancel: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     } 
 
    }); 
 
    } 
 

 
    function SearchForCustomerAccounts() { 
 
    console.log("Name: " + vmAccount.Name); 
 
    $.ajax({ 
 
     url: "api/CustomerSearchController/" + vmAccount.Name, 
 
     type: "GET", 
 
     dataType: "json", 
 
     success: function(data) { 
 
     DisplayResults(data); 
 
     } 
 
    }); 
 
    } 
 

 
    function DisplayResults(data) { 
 
    vmAccount.Accounts.removeAll(); 
 
    for (var i = 0; i < data.length; i++) { 
 
     vmAccount.Accounts.push(data[i]); 
 
    } 
 
    }; 
 

 
    $("#butSearch").button().on("click", function() { 
 
    DisplayDialog(); 
 
    }); 
 

 
    $(document).ready(function() { 
 
    ko.applyBindings(vmAccount); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<body> 
 
    <button id="butSearch">Open</button> 
 

 
    <div id="Dialog" style="visibility: visible"> 
 
    <form id="Account"> 
 
     <p>Customer Name</p> 
 
     <input type="text" data-bind="value: Name" /> 
 
    </form> 
 
    </div> 
 

 
</body>

DisplayResults

我是新來的JavaScript和淘汰賽，所以它可能是一些簡單的缺失。感謝您提供的任何幫助，謝謝！

來源

2015-05-08 Brett

您的代碼段缺少的jQuery UI – sroes

哎呦忘記使用計算器編碼片段工具 – Brett

1）您的vmAccount是函數，但您嘗試像實例一樣使用它。

2）要從KO的可觀察值中獲得價值，您應該將其稱爲（unwrap value）。所以用vmAccount.Name()代替vmAccount.Name。

$(function() { 
 

 
    function VmAccount() { 
 
    var self = this; 
 
    this.Accounts = ko.observableArray(); 
 
    this.Name = ko.observable('Jimmy'); 
 
    }; 
 
    
 
    var vmAccount = new VmAccount(); 
 

 
    function DisplayDialog() { 
 

 
    $("#Dialog").dialog({ 
 
     resizable: false, 
 
     height: 140, 
 
     modal: true, 
 
     buttons: { 
 
     "Search": function() { 
 
      SearchForCustomerAccounts(); 
 

 
     }, 
 
     Cancel: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     } 
 
    }); 
 
    } 
 

 
    function SearchForCustomerAccounts() { 
 
    console.log("Name: " + vmAccount.Name()); 
 
    $.ajax({ 
 
     url: "api/CustomerSearchController/" + vmAccount.Name(), 
 
     type: "GET", 
 
     dataType: "json", 
 
     success: function(data) { 
 
     DisplayResults(data); 
 
     } 
 
    }); 
 
    } 
 

 
    function DisplayResults(data) { 
 
    vmAccount.Accounts.removeAll(); 
 
    for (var i = 0; i < data.length; i++) { 
 
     vmAccount.Accounts.push(data[i]); 
 
    } 
 
    }; 
 

 
    $("#butSearch").button().on("click", function() { 
 
    DisplayDialog(); 
 
    }); 
 

 
    $(document).ready(function() { 
 
    ko.applyBindings(vmAccount); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<body> 
 
    <button id="butSearch">Open</button> 
 

 
    <div id="Dialog" style="visibility: visible"> 
 
    <form id="Account"> 
 
     <p>Customer Name</p> 
 
     <input type="text" data-bind="value: Name" /> 
 
    </form> 
 
    </div> 
 

 
</body>

來源

2015-05-08 09:22:29 azaviruha

是，與第二的伎倆在參考添加問題謝謝你的幫助:) – Brett

代碼應該看起來像這樣，vmAccount是空的，因爲函數沒有返回任何東西;

var vmAccount = function() { 
var self = this; 
this.Accounts = ko.observableArray(); 
this.Name = ko.observable('Jimmy'); 
return this;

};

來源

2015-05-08 09:18:27 Rakesh

$(function() { 
 

 
    var vmAccount = { 
 
    Accounts : ko.observableArray(), 
 
    Name : ko.observable('Jimmy'), 
 
    }; 
 

 
    function DisplayDialog() { 
 

 
    $("#Dialog").dialog({ 
 
     resizable: false, 
 
     height: 140, 
 
     modal: true, 
 
     buttons: { 
 
     "Search": function() { 
 
      SearchForCustomerAccounts(); 
 

 
     }, 
 
     Cancel: function() { 
 
      $(this).dialog("close"); 
 
     } 
 
     } 
 
    }); 
 
    } 
 

 
    function SearchForCustomerAccounts() { 
 
    console.log("Name: " + vmAccount.Name()); 
 
    $.ajax({ 
 
     url: "api/CustomerSearchController/" + vmAccount.Name(), 
 
     type: "GET", 
 
     dataType: "json", 
 
     success: function(data) { 
 
     DisplayResults(data); 
 
     } 
 
    }); 
 
    } 
 

 
    function DisplayResults(data) { 
 
    vmAccount.Accounts.removeAll(); 
 
    for (var i = 0; i < data.length; i++) { 
 
     vmAccount.Accounts.push(data[i]); 
 
    } 
 
    }; 
 

 
    $("#butSearch").button().on("click", function() { 
 
    DisplayDialog(); 
 
    }); 
 

 
    $(document).ready(function() { 
 
    ko.applyBindings(vmAccount); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<body> 
 
    <button id="butSearch">Open</button> 
 

 
    <div id="Dialog" style="visibility: visible"> 
 
    <form id="Account"> 
 
     <p>Customer Name</p> 
 
     <input type="text" data-bind="value: Name()" /> 
 
    </form> 
 
    </div> 
 

 
</body>

來源

2015-05-08 09:44:10

KnockoutJS失去視圖模型

回答

相關問題