В чем основное отличие использования функции computed и функции subscribe в knockout.js?
Разница между подпиской и вычислением в нокауте js
Ответ 1
заставил его работать, используя это:)
function drawChart() {
var sample_data = document.getElementById('sample_data').value;
var data2 = eval("["+sample_data+"]");
var data = new google.visualization.arrayToDataTable(data2);
var options = {
hAxis: {title: 'Age', minValue: 0,maxValue:105},
vAxis: {title:'Savings', minValue: 0,maxValue:2500000},
width: 960, height: 300,
colors: ['#4a82bd'],
legend:'none'
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function buffer(){
setTimeout(function () {drawChart();}, 100);
}
function ViewModel() {
var self =this;
self.rangeSelect = ko.observable('0%');
self.dataGetter = ko.computed(function(){
var range = self.rangeSelect();
if(range=='0%'){
return "['Age','Savings'],"+
"[25,0],"+
"[26,2738],"+
"[27,5834],"+
"[28,9278],"+
"[29,13191],"+
"[30,17592],"+
"[31,22288],"+
"[32,27418],"+
"[33,32993],"+
"[34,38954],"+
"[35,45304],"+
"[36,52127],"+
"[37,59254],"+
"[38,66663],"+
"[39,74535],"+
"[40,83148],"+
"[41,91537],"+
"[42,100823],"+
"[43,110002],"+
"[44,119837],"+
"[45,129897],"+
"[46,141052],"+
"[47,152166],"+
"[48,163757],"+
"[49,175561],"+
"[50,188520],"+
"[51,200952],"+
"[52,214325],"+
"[53,228245],"+
"[54,243532],"+
"[55,259149],"+
"[56,274371],"+
"[57,290571],"+
"[58,307564],"+
"[59,322976],"+
"[60,340957],"+
"[61,358337],"+
"[62,375345],"+
"[63,392495],"+
"[64,410609],"+
"[65,428638],"+
"[66,400252],"+
"[67,370044],"+
"[68,340162],"+
"[69,306514],"+
"[70,274417],"+
"[71,239492],"+
"[72,205637],"+
"[73,169858],"+
"[74,133103],"+
"[75,97019],"+
"[76,58116],"+
"[77,19529],"+
"[78,0],"+
"[79,0],"+
"[80,0],"+
"[81,0],"+
"[82,0],"+
"[83,0],"+
"[84,0],"+
"[85,0],"+
"[86,0],"+
"[87,0],"+
"[88,0],"+
"[89,0]";
}
if(range=='30%'){
return "['Age','Savings'],"+
"[25,0],"+
"[26,2763],"+
"[27,5903],"+
"[28,9425],"+
"[28,13446],"+
"[30,17979],"+
"[31,22878],"+
"[32,28219],"+
"[33,34039],"+
"[34,40228],"+
"[35,46859],"+
"[36,54017],"+
"[37,61553],"+
"[38,69396],"+
"[39,77845],"+
"[40,86793],"+
"[41,95891],"+
"[42,105723],"+
"[43,115624],"+
"[44,126388],"+
"[45,137413],"+
"[46,149463],"+
"[47,161610],"+
"[48,174637],"+
"[49,188323],"+
"[50,201752],"+
"[51,216495],"+
"[52,232232],"+
"[53,249291],"+
"[54,266171],"+
"[55,284657],"+
"[56,303552],"+
"[57,322324],"+
"[58,342561],"+
"[59,360749],"+
"[60,384075],"+
"[61,407563],"+
"[62,430104],"+
"[63,452547],"+
"[64,478876],"+
"[65,502663],"+
"[66,482031],"+
"[67,460505],"+
"[68,436020],"+
"[69,410875],"+
"[70,385525],"+
"[71,357512],"+
"[72,331003],"+
"[73,302766],"+
"[74,270112],"+
"[75,239441],"+
"[76,204458],"+
"[77,170147],"+
"[78,135332],"+
"[79,99096],"+
"[80,60097],"+
"[81,20800],"+
"[82,0],"+
"[83,0],"+
"[84,0],"+
"[85,0],"+
"[86,0],"+
"[87,0],"+
"[88,0],"+
"[89,0]";
}
if(range=='40%'){
return "['Age','Savings'],"+
"[25,0],"+
"[26,2770],"+
"[27,5923],"+
"[28,9475],"+
"[29,13352],"+
"[30,18098],"+
"[31,23072],"+
"[32,28500],"+
"[33,34380],"+
"[34,40634],"+
"[35,47414],"+
"[36,54661],"+
"[37,62364],"+
"[38,70244],"+
"[39,78957],"+
"[40,88011],"+
"[41,97367],"+
"[42,107449],"+
"[43,117533],"+
"[44,128446],"+
"[45,139854],"+
"[46,152196],"+
"[47,164734],"+
"[48,178446],"+
"[49,192185],"+
"[50,206185],"+
"[51,221798],"+
"[52,237983],"+
"[53,256007],"+
"[54,273350],"+
"[55,293178],"+
"[56,312529],"+
"[57,333228],"+
"[58,354387],"+
"[59,374656],"+
"[60,397386],"+
"[61,422795],"+
"[62,447954],"+
"[63,474574],"+
"[64,502022],"+
"[65,528116],"+
"[66,508208],"+
"[67,489122],"+
"[68,469393],"+
"[69,446790],"+
"[70,425620],"+
"[71,399269],"+
"[72,374341],"+
"[73,347950],"+
"[74,320046],"+
"[75,289477],"+
"[76,259481],"+
"[77,226566],"+
"[78,195239],"+
"[79,161137],"+
"[80,124524],"+
"[81,87936],"+
"[82,49105],"+
"[83,9223],"+
"[84,0],"+
"[85,0],"+
"[86,0],"+
"[87,0],"+
"[88,0],"+
"[89,0]";
}
if(range=='50%'){
return "['Age','Savings'],"+
"[25,0],"+
"[26,2777],"+
"[27,5945],"+
"[28,9525],"+
"[29,13621],"+
"[30,18246],"+
"[31,23263],"+
"[32,28752],"+
"[33,34709],"+
"[34,41703],"+
"[35,47927],"+
"[36,55348],"+
"[37,63149],"+
"[38,71133],"+
"[39,79953],"+
"[40,89218],"+
"[41,98820],"+
"[42,109074],"+
"[43,119427],"+
"[44,130599],"+
"[45,142195],"+
"[46,154751],"+
"[47,167842],"+
"[48,182056],"+
"[49,195975],"+
"[50,210944],"+
"[51,227013],"+
"[52,243238],"+
"[53,262412],"+
"[54,280982],"+
"[55,301273],"+
"[56,321808],"+
"[57,344012],"+
"[58,365755],"+
"[59,386597],"+
"[60,411162],"+
"[61,438555],"+
"[62,463823],"+
"[63,494641],"+
"[64,523299],"+
"[65,551297],"+
"[66,537169],"+
"[67,516997],"+
"[68,502759],"+
"[69,483642],"+
"[70,462924],"+
"[71,439222],"+
"[72,417198],"+
"[73,391691],"+
"[74,367612],"+
"[75,341845],"+
"[76,312223],"+
"[77,282649],"+
"[78,249556],"+
"[79,220004],"+
"[80,186632],"+
"[81,152438],"+
"[82,114808],"+
"[83,77722],"+
"[84,38624],"+
"[85,0],"+
"[86,0],"+
"[87,0],"+
"[88,0],"+
"[89,0]";
}
if(range=='60%'){
return "['Age','Savings'],"+
"[25,0],"+
"[26,2786],"+
"[27,5971],"+
"[28,9570],"+
"[28,13704],"+
"[30,18373],"+
"[31,23443],"+
"[32,28982],"+
"[33,35048],"+
"[34,41489],"+
"[35,48454],"+
"[36,55997],"+
"[37,63928],"+
"[38,72082],"+
"[39,81085],"+
"[40,90335],"+
"[41,100141],"+
"[42,110564],"+
"[43,121448],"+
"[44,132626],"+
"[45,144297],"+
"[46,157620],"+
"[47,171060],"+
"[48,185356],"+
"[49,199957],"+
"[50,215204],"+
"[51,231915],"+
"[52,249507],"+
"[53,268765],"+
"[54,288130],"+
"[55,308893],"+
"[56,330782],"+
"[57,354500],"+
"[58,378065],"+
"[59,399396],"+
"[60,425435],"+
"[61,455705],"+
"[62,481828],"+
"[63,513748],"+
"[64,545058],"+
"[65,574577],"+
"[66,564651],"+
"[67,548752],"+
"[68,536922],"+
"[69,517938],"+
"[70,500535],"+
"[71,478030],"+
"[72,458729],"+
"[73,437272],"+
"[74,415832],"+
"[75,393035],"+
"[76,367364],"+
"[77,336848],"+
"[78,306959],"+
"[79,279837],"+
"[80,248487],"+
"[81,213600],"+
"[82,181529],"+
"[83,147792],"+
"[84,112113],"+
"[85,76294],"+
"[86,39301],"+
"[87,104],"+
"[88,0],"+
"[89,0]";
;
}
if(range=='70%'){
return "['Age','Savings'],"+
"[25,0],"+
"[26,2794],"+
"[27,5993],"+
"[28,9618],"+
"[29,13779],"+
"[30,18504],"+
"[31,23631],"+
"[32,29320],"+
"[33,35387],"+
"[34,41911],"+
"[35,48993],"+
"[36,56634],"+
"[37,64692],"+
"[38,72983],"+
"[39,82101],"+
"[40,91570],"+
"[41,101540],"+
"[42,112196],"+
"[43,123369],"+
"[44,134976],"+
"[45,146856],"+
"[46,160860],"+
"[47,174187],"+
"[48,189197],"+
"[49,204699],"+
"[50,220890],"+
"[51,237571],"+
"[52,256558],"+
"[53,276256],"+
"[54,296966],"+
"[55,318733],"+
"[56,342416],"+
"[57,366487],"+
"[58,391413],"+
"[59,415809],"+
"[60,443588],"+
"[61,474867],"+
"[62,503044],"+
"[63,534527],"+
"[64,570607],"+
"[65,601668],"+
"[66,595372],"+
"[67,583042],"+
"[68,574661],"+
"[69,559823],"+
"[70,543853],"+
"[71,526871],"+
"[72,506862],"+
"[73,492386],"+
"[74,472854],"+
"[75,451655],"+
"[76,429040],"+
"[77,403881],"+
"[78,380852],"+
"[79,353785],"+
"[80,326895],"+
"[81,296793],"+
"[82,269441],"+
"[83,240067],"+
"[84,205984],"+
"[85,176523],"+
"[86,143190],"+
"[87,105151],"+
"[88,69312],"+
"[89,33088],";
}
});
}
//Activate knockout.js
ko.applyBindings(new ViewModel());
$(document).ready(function(){
$("input[name='range']").change(function(){
buffer();
});
})
здесь обновленная скрипка: http://jsfiddle.net/a_miguel6687/aL73X/6/
Ответ 2
Вычисленный наблюдаемый обычно используется для возврата вычисленного значения. Любые наблюдаемые (или другие вычисленные), которые доступны как часть вычисленной оценки, станут зависимыми и запускают ее снова. Вычисляемый может использоваться как подписка и особенно полезен, если вы хотите сразу подписаться на несколько наблюдаемых. Однако вы не будете знать, какая зависимость вызвала изменение.
Ручная подписка зависит от одного наблюдаемого (или вычисленного) и передается новое значение в качестве первого аргумента. Концепции создания зависимостей при выполнении обработчика подписки не существует, поскольку она будет срабатывать только тогда, когда это наблюдаемое изменение изменится.
Ответ 3
Короче говоря, вычисленный тип похож на свойство getter/setter и в основном для вычисленных значений. Подписка - это своего рода функция обратного вызова, которую вы можете добавить/удалить из объекта subscribable, из которого наблюдаются и вычисляются.
По умолчанию подписка подписывается на тему с именем "change" и будет выглядеть следующим образом:
var obs = ko.observable();
obs.subscribe(function(newValue) { ... }, null, 'change');
Есть еще одна встроенная тема, которую вы можете подписаться под названием 'beforeChange', а значение, переданное в это старое значение:
obs.subscribe(function(oldValue) { ... }, null, 'beforeChange');
Вы также можете создавать свои собственные темы, чтобы смотреть и "публиковать", если хотите, что-то вроде этого:
obs.subscribe(function(newValue) { ... }, null, 'customTopic');
obs("Hello World");// When this updates, 'change' and 'beforeChange' subscriptions are called.
obs.notifySubscribers('customTopic');// This is 'publishing' the new value to anyone subscribing to this topic.
Райан Нимейер имеет отличный видео об этом в 16:35, а также Knockout-Postbox, основанный на этой концепции.
Ответ 4
Вычисленный выполняется через зависимости для генерации нового значения, которое может быть связано. Функция подписки подобна событию.