Question

出于某种原因，我无法获得AJAX功能

$('#queueSubmit').on('click', function() {
        $.ajax({
                type: 'POST',
                url: nodeApiUrl + 'twitter/update_status/',
                contentType: 'application/json',
                data: JSON.stringify({'status': $('#queuedTweet').val() }),
                dataType: 'json',
                error: $.osf.handleJSONError
        });
});

单击标识为queueSubmit的按钮时调用

。这是生成按钮和内容的淘汰代码。

   <div id = "foo">
    <!-- ko foreach: tweets -->

        <input id = "queuedTweet" data-bind="value: tweet"/>
        <a  class="btn btn-primary" id = "queueSubmit" >
            Send
        </a>
        <a id = "removeFromQueue" data-bind = "click: $parent.removeTweet, value:index" class="btn btn-danger">
            Delete
        </a>
       </br>

     <!-- /ko -->
   </div>

它没有注册按钮被点击。我认为它与绑定有关，但不确定如何补救。任何帮助将不胜感激！

Answer 1

您希望这样做而不是当前的实现：

 <a class="btn btn-primary" data-bind="click: $parent.queueSubmit">Send</a>

然后在你的viewModel中执行以下操作：

self.queueSubmit = function() {
    $.ajax({
            type: 'POST',
            url: nodeApiUrl + 'twitter/update_status/',
            contentType: 'application/json',
            data: JSON.stringify({'status': $('#queuedTweet').val() }),
            dataType: 'json',
            error: $.osf.handleJSONError
    });
};

随时使用敲除绑定。如果不存在本机绑定，请创建custom binding。

Answer 2

ID应该是唯一的，但您要在一个ko foreach循环中创建它们。这意味着你实际上有一个＆＃34; queueSubmit＆＃34;标识。 jQuery假设你只有一个，所以它总是检索列表中的第一个。

您可以使用本机JavaScript函数来查看此操作：

document.querySelector("#queueSubmit"); // <== returns the first one in the list
document.querySelectorAll("#queueSubmit"); // <== return the array of elements with that id
document.querySelectorAll("#queueSubmit")[n]; // <== returns the element at index 'n'

复制ID是一个非常糟糕的主意（我甚至一直感到惊讶，甚至允许这样做，但确实如此）。

这导致了问题＆＃34;你为什么使用ID＆＃34;？如果您要像这样复制它，那么要么使ID唯一，要么用类替换它们。（班级选项要好得多）。

更好的是，就像@Cameron建议的那样，使用点击绑定到KO ViewModel内的函数。这还有一个额外的好处，就是自动将绑定数据项（foreach循环的当前实例）传递给函数。

<div id = "foo">
<!-- ko foreach: tweets -->

    <input id = "queuedTweet" data-bind="value: tweet"/>
    <a  class="btn btn-primary" click="$parent.queueSubmit" >
        Send
    </a>
    <a id="removeFromQueue" data-bind="click: $parent.removeTweet, value:index" class="btn btn-danger">
        Delete
    </a>
   </br>

 <!-- /ko -->

然后在你的ViewModel中：

self.queueSubmit = function(item) { // <== current tweet is passed in automatically 
$.ajax({
        type: 'POST',
        url: nodeApiUrl + 'twitter/update_status/',
        contentType: 'application/json',
        data: JSON.stringify({'status': item.tweet }), // <== use the item, not jQuery
        dataType: 'json',
        error: $.osf.handleJSONError
    });
};

您可以在KO网站

了解有关the click binding的更多信息

Answer 3

您不能以这种方式使用ID。您应该注册click绑定。

AJAX不能与Knockout.JS一起使用

3 个答案: