剔除文本绑定不适用于输入

发布于 2024-12-13 19:36:57 字数 2854 浏览 0 评论 0原文

作为 Javascript 的初学者，我决定尝试 Knockout，从非常简单开始，然后变得更高级。然而，我什至无法让它在一个非常简单的场景中工作。

我猜问题很简单，我有点不好意思在这里问这个问题。但我不擅长调试 Javascript，也不知道错误如何显现，所以这里是。

这是由 asp.net MVC 3 生成后页面的 html 源代码：

<html>

<head>
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>

<body>

<h2>Index</h2>

<script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
<script src="/Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>

<script type="text/javascript">

    var viewModel = {
        name: "Joe",
        number: "13"
    };

</script>

<script type="text/javascript">
    ko.applyBindings(viewModel);
</script>

<ul>
<li>Name: <input data-bind="text: name"/></li>
<li>Number: <input data-bind="text: number"/></li>
</ul>

<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>

</body>
</html>

Joe 或 13 未绑定到输入或文本框。

尝试将其放入 ko.observable() 但 deos 也不起作用。就像脚本没有运行一样。

尝试使用 FireBug 进行调试，我可以看到 applyBinding 已执行，并且 viewModel 对象确实包含正确的变量。

这里发生的事情可能是显而易见的。如果你在这里看不到它，那么你能指出我在使用 FireBug 时应该寻找什么吗？

编辑

在尝试了给出的解决方案的几种组合后，我仍然遇到问题。对于一种解决方案，HTML 看起来像这样：

<html>
<head>

    <title>Index</title>

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
    <script type="text/javascript">
            var viewModel = {
                name: ko.observable("Joe"),
                number: ko.observable("13")
            };
    </script>

    <script type="text/javascript">
        $(function () { ko.applyBindings(viewModel); })
    </script>

</head>

<body>
<h2>Index</h2>

<ul>
<li>Name: <input data-bind="text: name"></input></li>
<li>Number: <input data-bind="text: number"></input></li>
</ul>

<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>

</body>
</html>

我使用哪种 applyBindings 解决方案似乎并不重要，它们的工作原理都是相同的。

所以绑定最终有效，但仅在 IE 和 Firefox 上有效，但在 Chrome 上无效。而且可观察到的根本不起作用。我无法通过写入输入字段来更新字段。

原文

As a total beginner with Javascripts I decided to try out Knockout starting very simple and going more advanced. I however couldn't even manage to get it to work in a very simple scenario.

I'm guessing the problem is something very simple and I'm kind of embarrassed to be asking this here. But I'm not good at debugging Javascript and do not know how bugs might manifest so here goes.

This is the html source of the page after it's been generated by asp.net MVC 3 :

<html>

<head>
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>

<body>

<h2>Index</h2>

<script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
<script src="/Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>

<script type="text/javascript">

    var viewModel = {
        name: "Joe",
        number: "13"
    };

</script>

<script type="text/javascript">
    ko.applyBindings(viewModel);
</script>

<ul>
<li>Name: <input data-bind="text: name"/></li>
<li>Number: <input data-bind="text: number"/></li>
</ul>

<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>

</body>
</html>

Joe or 13 does not get bound to the input or textbox.

Tried putting it in a ko.observable() but also deos not work. It's just like the script isn't running.

Tried debugging using FireBug and I can see the applyBinding is executed and the viewModel object does include the correct variables.

It's probably something obvious that is going on here. If you can't see it here then could you point out what I should look for when using FireBug?

EDIT

After trying several combinations of the solutions given I'm still having problems. With one solution the HTML looks like this:

<html>
<head>

    <title>Index</title>

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
    <script type="text/javascript">
            var viewModel = {
                name: ko.observable("Joe"),
                number: ko.observable("13")
            };
    </script>

    <script type="text/javascript">
        $(function () { ko.applyBindings(viewModel); })
    </script>

</head>

<body>
<h2>Index</h2>

<ul>
<li>Name: <input data-bind="text: name"></input></li>
<li>Number: <input data-bind="text: number"></input></li>
</ul>

<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>

</body>
</html>

Doesn't seem to matter which applyBindings solution I use they all work the same.

So the binding finally works but only on IE and Firefox but not on Chrome. Also the observable doesn't work at all. I can't update the fields by writing into the input field.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

病女 2024-12-20 19:36:57

输入标签应该绑定到名称作为值而不是文本

，例如

Name:<input data-bind="value: name"></input>

The input tag should be bound to name as a value instead of a text

e.g

Name:<input data-bind="value: name"></input>

回复收藏 0 原文

握住我的手 2024-12-20 19:36:57

applyBindings 必须在 html 完全加载后执行。通常，我从 jquery.ready 方法调用它，但我想如果将包含 applyBindings 的脚本块放在需要绑定的 html 标签后面，它也会起作用。

回复收藏 0 原文

画骨成沙 2024-12-20 19:36:57

尝试：

<script type="text/javascript">
$(function () {


    var viewModel = { 
        name: "Joe", 
        number: "13" 
    }; 

    ko.applyBindings(viewModel); 
});
</script>

..如果您想要双向绑定（即当用户在输入框中键入内容时模型会更新），请使名称和号码可观察

Try:

<script type="text/javascript">
$(function () {


    var viewModel = { 
        name: "Joe", 
        number: "13" 
    }; 

    ko.applyBindings(viewModel); 
});
</script>

.. and make name and number observable if you want two way binding (ie. model gets updated when user types into input box)

回复收藏 0 原文

对不⑦ 2024-12-20 19:36:57

脚本应该写在绑定控件下面：

<div>Today's message is: <span data-bind="text: myMessage"></span></div><script type="text/javascript">
var viewModel = {
    myMessage: "Hello"
};
ko.applyBindings(viewModel);</script>

The script should be written below the binding control:

<div>Today's message is: <span data-bind="text: myMessage"></span></div><script type="text/javascript">
var viewModel = {
    myMessage: "Hello"
};
ko.applyBindings(viewModel);</script>

回复收藏 0 原文

~没有更多了~