如何使用jQuery获取ko observable的值?

时间:2022-11-27 12:05:55

I have a span on a html page.

我在html页面上有一个跨度。

<span id="Amount" value="<?php echo $userProvidedAmount ; ?>"></span>

In my knockout code I need to add this value to the observable and I am using jQuery, but for some reason I cannot get the value.

在我的淘汰代码中,我需要将此值添加到observable并且我使用jQuery,但由于某种原因我无法获得该值。

self.amount = ko.observable($('#Amount').val());

Is there any way to get the value? I have checked that the value has some value but I cannot get the data in the observable.

有没有办法获得价值?我已经检查过该值有一些值,但是我无法获得observable中的数据。

2 个解决方案

#1


2  

jQuery's val() function only works on input elements.
You're trying to use it on a span element, so it fails.

jQuery的val()函数仅适用于输入元素。你试图在span元素上使用它,所以它失败了。

The easiest way to retrieve the value attribute would be to use attr():

检索value属性的最简单方法是使用attr():

amount = $('#Amount').attr('value');

But: Span tags cannot have the "value" attribute in standard HTML. Better to use a data-attribute:

但是:Span标签在标准HTML中不能具有“value”属性。最好使用数据属性:

<span id="Amount" data-value="<?php echo $userProvidedAmount ; ?>"></span>

... then you can retrieve it with the jQuery data() function:

...然后你可以使用jQuery data()函数检索它:

amount = $('#Amount').data('value');

#2


2  

If you want to use KnockoutJS...

如果你想使用KnockoutJS ......

Then: Yikes! Don't mix jQuery and Knockout like that. If you're using Knockout, try to keep your view "dumb", i.e. a reflection of the state of your view models. Use Knockout's data-binding features to fill the view instead. So e.g.:

然后:哎呀!不要混淆jQuery和Knockout。如果您正在使用Knockout,请尝试保持视图“哑”,即反映视图模型的状态。使用Knockout的数据绑定功能来填充视图。例如:

<span id="Amount" data-bind="text: amount"></span>
self.amount = ko.observable(<?php echo $userProvidedAmount ; ?>);

Typically you don't want to mix PHP and JS that directly, and you'll have something like this instead:

通常你不想直接混合使用PHP和JS,你会得到类似的东西:

<span id="Amount" data-bind="text: amount"></span>
<script>
window.myNamespace.initialData = {
    amount: <?php echo $userProvidedAmount ; ?>
};
</script>
self.amount = ko.observable(window.myNamespace.initialData.amount);

Or whatever way your framework or homebrew setup analogously allows.

或者您的框架或自制程序设置类似地允许的任何方式。

If you don't necessarily want to use KnockoutJS...

如果你不一定想使用KnockoutJS ......

Having said all that, if you're not going to use KnockoutJS, you should look at @KWeiss' answer.

说了这么多,如果你不打算使用KnockoutJS,你应该看看@KWeiss的回答。

#1


2  

jQuery's val() function only works on input elements.
You're trying to use it on a span element, so it fails.

jQuery的val()函数仅适用于输入元素。你试图在span元素上使用它,所以它失败了。

The easiest way to retrieve the value attribute would be to use attr():

检索value属性的最简单方法是使用attr():

amount = $('#Amount').attr('value');

But: Span tags cannot have the "value" attribute in standard HTML. Better to use a data-attribute:

但是:Span标签在标准HTML中不能具有“value”属性。最好使用数据属性:

<span id="Amount" data-value="<?php echo $userProvidedAmount ; ?>"></span>

... then you can retrieve it with the jQuery data() function:

...然后你可以使用jQuery data()函数检索它:

amount = $('#Amount').data('value');

#2


2  

If you want to use KnockoutJS...

如果你想使用KnockoutJS ......

Then: Yikes! Don't mix jQuery and Knockout like that. If you're using Knockout, try to keep your view "dumb", i.e. a reflection of the state of your view models. Use Knockout's data-binding features to fill the view instead. So e.g.:

然后:哎呀!不要混淆jQuery和Knockout。如果您正在使用Knockout,请尝试保持视图“哑”,即反映视图模型的状态。使用Knockout的数据绑定功能来填充视图。例如:

<span id="Amount" data-bind="text: amount"></span>
self.amount = ko.observable(<?php echo $userProvidedAmount ; ?>);

Typically you don't want to mix PHP and JS that directly, and you'll have something like this instead:

通常你不想直接混合使用PHP和JS,你会得到类似的东西:

<span id="Amount" data-bind="text: amount"></span>
<script>
window.myNamespace.initialData = {
    amount: <?php echo $userProvidedAmount ; ?>
};
</script>
self.amount = ko.observable(window.myNamespace.initialData.amount);

Or whatever way your framework or homebrew setup analogously allows.

或者您的框架或自制程序设置类似地允许的任何方式。

If you don't necessarily want to use KnockoutJS...

如果你不一定想使用KnockoutJS ......

Having said all that, if you're not going to use KnockoutJS, you should look at @KWeiss' answer.

说了这么多,如果你不打算使用KnockoutJS,你应该看看@KWeiss的回答。