2014-12-31 2 views
-2

Я хотел привязать список ид к столу, но не в состоянии сделать так:данных связывания с помощью кнопки

HTML:

<table> 
    <thead><tr><th>ID</th></tr></thead> 
    <tbody data-bind="foreach: records"> 
     <tr><td data-bind="text: id"></td></tr></tbody> 
    </table> 
    <button id="help">help</button> 

Javascript:

function ViewModel(){ 
    var array = []; 
    this.records = ko.observableArray(array); 
} 

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

$("#help").click(function(){ 
    processClick(); 
}); 

function processClick(){ 
    vm.array([{id: "888888"}]); 
} 
+0

'Uncaught TypeError: undefined не является функцией' в 'function processClick() { vm.array ([{id:" 888888 "}]); } ' – Hackerman

ответ

1

Вот фиксированный код (нажмите «Выполнить код фрагмента», чтобы увидеть, как он работает)

function ViewModel(){ 
 
    var self = this; 
 
    self.i = 1; 
 
    this.records = ko.observableArray([]); 
 
    
 
    this.processClick = function() 
 
    { 
 
    self.records.push({id: self.i++});  
 
    }; 
 
} 
 

 
var vm = new ViewModel(); 
 
ko.applyBindings(vm);
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script> 
 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <table> 
 
    <thead><tr><th>ID</th></tr></thead> 
 
    <tbody data-bind="foreach: records"> 
 
     <tr><td data-bind="text: id"></td></tr></tbody> 
 
    </table> 
 
    <button id="help" data-bind="click: processClick">help</button> 
 
</body> 
 
</html>

Вы смешиваете нокаут с DOM-манипуляцией с помощью jQuery. Это ошибка ... если вы хотите сделать действие для ViewModel, вам нужно определить его как функцию в самой ViewModel.

Еще одна ошибка заключалась в том, чтобы объявить переменную массива как локальную для ViewModel, а затем попытаться получить к ней доступ через простую функцию javascript. Исправление в коде, что делает его работу является:

function processClick(){ 
    vm.records.push({id: "888888"}); 
} 

Таким образом, вы обновляете ViewModel записи observableArray, но я настоятельно рекомендую вам, чтобы изолировать ViewModel от Tradicional яваскрипта функций.

Приветствия!

Смежные вопросы