Question

我想在jQuery函数中访问元素id，但它返回undefined。

我的HTML代码是：

<div data-bind="foreach: showAds">
    <div data-bind="attr:{'id':id}"> //how to access this id in addcomment function
        <div>..other stuff..</div>

        <textarea placeholder="comment.." data-bind="value:newComment"></textarea>
        <input type="button" data-url="/api/comment" data-bind="click: addcomment" value="submit" />

        <div data-bind="foreach:showComment">
            <div data-bind="attr:{'id':id}"> //how to access this id in addcommentreply function.
                <div>.. show comment..</div>
                <textarea data-bind="value:newCommentReply" placeholder="reply.."></textarea>
                <input type="button" data-url="/api/comment" data-bind="click: addCommentReply" value="submit" />

                <div data-bind="foreach: showCommentReply">
                    <div data-bind="attr:{'id':id}">
                        <div>.. show comment reply .. </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

js代码是：

function commentReply(data) {
        var self = this;
        data = data || {};
        //other stuff
        self.id = data.id;
    }
function comment(data) {
        var self = this;
        self.id = data.id;
        //other stuff
        self.addCommentReply = function () {
            var commentId = $(this).parent().attr("id"); //shows undefined
            //send ajax reqest to post comment reply
        }
    }
function ad(data) {
        var self = this;
        self.id = data.id;
        //other sutff
        self.addcomment = function () {
            var = $(this).parent().attr('id'); //shows undefined
            //send ajax request to post comment
        }
    }
        function viewModel() {
                var self = this;
                self.showAds = ko.observableArray();
                self.loadad = function () {
                    //load ads using ajax
                }
                self.loadad();
                return self;
            }
    $(function () {
            ko.applyBindings(new viewModel());
        });

如何访问id？

Answer 1

不要以这种方式混合Knockout和jQuery。相反，避免将jQuery用于逻辑，并尽量不要在视图模型中使用DOM中的信息。

如果您需要让子视图模型知道它们的父属性，有多种方法可以做到这一点。例如，您可以在点击事件中使用Knockout上下文：

function CommentReply(data) {
  var self = this;
}

function Comment(data){
  var self = this;
  self.txt = ko.observable();
  self.isEditing = ko.observable(!data || !data.id);
}

function Ad(data) {
  var self = this;
  self.txt = ko.observable(data.txt);
  self.comments = ko.observableArray([]);
  
  self.addComment = function() {
    self.comments.push(new Comment());
  }
  
  self.saveComment = function(comment) {
    console.log(self); // id accessible here
    console.log(comment); // id accessible here
    comment.isEditing(false);
  }
}

function ViewModel() {
  var self = this;  
  self.ads = ko.observableArray([]);
  
  self.loadAds = function() {
    // Normally loading with Ajax, but stubbing it here:
    self.ads.push(new Ad({ id: 1, txt: "Buy shampoo now!" }));
    self.ads.push(new Ad({ id: 2, txt: "Best pizza in town.!" }));
  }
  
  self.loadAds();
}

$(function() {
  ko.applyBindings(new ViewModel());
});

.ad { padding: 10px; margin: 5px; border: 1px solid gray; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="foreach: ads">
  <div class="ad">
    <div data-bind="text: txt"></div> 
    <input type="button" data-bind="click: addComment" value="add comment" />
    <div data-bind="foreach: comments">
      <p data-bind="text: txt, visible: !isEditing()"></p>
      <div data-bind="visible: isEditing">
        <textarea data-bind="value: txt"></textarea>
        <input type="button" data-bind="click: $parent.saveComment" value="save comment">
    </div>
  </div>
</div>

此示例可以通过“评论回复”轻松扩展到一个额外的嵌套级别。

有几种变体适合不同的口味，包括：

在$root上放置DAL类型的方法，并将适当的变量（例如$data和$parent甚至$parents[1]）传递给它。
使您的视图模型构造函数依赖于其父级，例如在构建Ad时要求Comment，以便您的click处理程序可以在必要时向上导航。

您应该阅读Knockout的教程（网站上的教程）和/或阅读the Binding context documentation。

在Knockout foreach中创建的元素上使用jQuery的id上的未定义值

1 个答案: