{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Lonely孤独者° 的问题《Knockout not displaying when a value changes》','https://www.manongdao.com/q-929735.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am trying to use knockout to hide text if greater than a certain value. For some reason I cant get it to work. When I click the test button the second text field should show..
<body class="calc" onLoad="createnav()">
<input type="button" value="test" />
<p data-bind="text: 'This shows', if: 6 > 4" ></p>
<br>
<p data-bind="text: 'This does Not', if: 6 > qty"></p>
Here is the script:
function AppViewModel() {
this.qty = ko.observable("1"); }
// Activates knockout.js
var app = new AppViewModel(); ko.applyBindings(app);
//When I click button I want the name to change
$('input[type=button]').click( function() {
var sum = '5';
app.qty(sum);
});
You need to access the value of the qty observable:
<p data-bind="text: 'This does Not', if: 6 > qty()"></p>Simple,
You cannot use declarative binding (no parenthis) when observable property is used in expression
As others have pointed out, you're comparing the observable object
qtyinstead of its valueqty()But you also might want to consider making your text a computed
Fiddle Example
This is a more knockout-like way of doing things, and provides the advantage of keeping your logic inside your view model instead of mixing it in your markup.
Among other advantages of this, you would have been able to clearly see your javascript values when debugging, and notice that qty was a function rather than a number.
It also allows you to reuse this value without repeating the calculations if you want to show it in multiple places.