TypScript knockoutjs привязка данных не работает

Пытается получить учебник по внедрению knockoutjs (2.21), который работает с машинописными текстами (0.9). Связывание данных не работает. Это первый JavaScript, на который я смотрел в течение многих лет. Я думаю, что мне не хватает правильного подключения html к viewmodel, сгенерированного с помощью классов типов. Проблемы возникали только после того, как я попытался ввести класс в учебник. Вот jsfiddle.TypScript knockoutjs привязка данных не работает

HTML фрагмент:

<body> 
<!-- This is a *view* - HTML markup that defines the appearance of your UI --> 

<p>First name: <strong data-bind="text: firstName"></strong></p> 
<p>Last name: <strong data-bind="text: lastName"></strong></p> 

<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p> 

<p>Full name: <strong data-bind="text: fullName"></strong></p> 

<button data-bind="click: capitalizeLastName">Go Caps</button> 
</body>

фрагмент машинопись

class koIntroductionViewModel { 
    firstName: any; 
    lastName: any; 
    fullName: any; 

    constructor() { 
     this.firstName = ko.observable("Bert"); 
     this.lastName = ko.observable("Bertington"); 
     this.fullName = ko.computed(this.createFullname()); 
    } 

    createFullname() { 
     return this.firstName + " " + this.lastName; 
    } 

    capitalizeLastName() { 
     var currentVal = this.lastName; 
     this.lastName = currentVal.toUpperCase(); 
    } 
} 

window.onload =() => { 
    ko.applyBindings(new koIntroductionViewModel()); 
}

Сформирован Javascript

var koIntroductionViewModel = (function() { 
    function koIntroductionViewModel() { 
     this.firstName = ko.observable("Bert"); 
     this.lastName = ko.observable("Bertington"); 
     this.fullName = ko.computed(this.createFullname()); 
    } 
    koIntroductionViewModel.prototype.createFullname = function() { 
     return this.firstName + " " + this.lastName; 
    }; 

    koIntroductionViewModel.prototype.capitalizeLastName = function() { 
     var currentVal = this.lastName; 
     this.lastName = currentVal.toUpperCase(); 
    }; 
    return koIntroductionViewModel; 
})(); 

window.onload = function() { 
    // Activates knockout.js 
    ko.applyBindings(new koIntroductionViewModel()); 
};

источник

2013-06-25 javelinBCD

http://meta.stackexchange.com/questions/147616/what-do-you-mean-it-doesnt-work –

Извините, я должен был сказать, что привязка данных не работала в названии. – javelinBCD

Javascript код должен быть больше, как это:

var koIntroductionViewModel = (function() { 
    function koIntroductionViewModel() { 
     this.firstName = ko.observable("Bert"); 
     this.lastName = ko.observable("Bertington"); 
     this.fullName = ko.computed(this.createFullname, this); // 1 
    } 
    koIntroductionViewModel.prototype.createFullname = function() { 
     return this.firstName() + " " + this.lastName(); // 2 
    }; 

    koIntroductionViewModel.prototype.capitalizeLastName = function() { 
     var currentVal = this.lastName(); // 2 
     this.lastName(currentVal.toUpperCase()); // 3 
    }; 
    return koIntroductionViewModel; 
})();

Вы не должны называть функцию createFullname(), здесь вы пытаетесь передать функцию вычисленному наблюдаемому, а не возвращаемому значению. Кроме того, если вы собираетесь использовать в вычисленной функции, вы должны пройти и у владельца. Объявив вычисленный как:
```
ko.computed(this.createFullname, this); 
```
Таким образом, вы говорите, что если this используется в функции createFullname(), что this следует обратиться к this в текущем контексте.
Наблюдаемые функции. Вы должны вызвать его, чтобы прочитать значение, которое оно имеет.
Чтобы сохранить значение в наблюдаемом, вы должны вызвать наблюдаемый проход в значении для хранения в качестве аргумента.

Updated fiddle

Соответствующий машинопись будет:

class koIntroductionViewModel { 
    firstName: any; 
    lastName: any; 
    fullName: any; 

    constructor() { 
     this.firstName = ko.observable("Bert"); 
     this.lastName = ko.observable("Bertington"); 
     this.fullName = ko.computed(this.createFullname, this); 
    } 

    createFullname() { 
     return this.firstName() + " " + this.lastName(); 
    } 

    capitalizeLastName() { 
     var currentVal = this.lastName(); 
     this.lastName(currentVal.toUpperCase()); 
    } 
}

источник

2013-06-25 20:00:26

Обе эти работы, спасибо за объяснение. Я был близок к тому, чтобы заставить его работать. – javelinBCD

Дайте эту модифицированную скрипку выстрел ..

http://jsfiddle.net/9nnnJ/5/

var koIntroductionViewModel = (function() { 
    var self = this; 
    this.firstName = ko.observable("Bert"); 
    this.lastName = ko.observable("Bertington"); 
    this.fullName = ko.computed(function() { 
     return self.firstName() + " " + self.lastName(); 
    }); 


    this.capitalizeLastName = function() { 
     var currentVal = self.lastName(); 
     self.lastName(currentVal.toUpperCase()); 
    }; 

}); 


var model = new koIntroductionViewModel(); 

ko.applyBindings(model);

источник

2013-06-25 20:00:29

TypScript knockoutjs привязка данных не работает

ответ

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