Question

我的HTML代码是：

<div data-bind="attr:{'id':id}">
     <div data-bind="text:name"></div>
</div>

和js代码是：

function ViewModel(data) {
    var self = this;
    self.id = data;
    self.name = data.name;
    self.getId = function () {
        var id = document.getElementById(self.id);
        console.log("id is " + id);
        id.scrollTop = id.scrollHeight;
    }
    self.getId();
}
$(function () {
    ko.applyBindings(new ViewModel(5,"irfan"));
})

现在在getId函数中如何获取id？因为我必须在该Id上应用scrollTop函数。

Answer 1

我不确定我是否理解这个问题，而且我不知道如何要求你澄清。基本上，你有多个错误，使得初始意图有点难以猜测。看看这是否符合您的要求;如果没有，请解释你想做什么（这与我正在做的不同）。

＆＃13;

function ViewModel(id, name) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.getId = function () {
        console.log("element is ", document.getElementById(self.id()));
    }
}
var vm = new ViewModel(5,"irfan");
ko.applyBindings(vm);
vm.getId();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="attr:{'id':id}">
     <div data-bind="text:name"></div>
</div>

＆＃13;

具体做法是：

data仅为5，因此data.name为undefined
要在data-bind中使用它们，id和name需要是Knockout observables
如果将+（串联）应用于字符串和HTML元素，则该元素将显示为[object HTMLDivElement]，这不是非常有用
最后，你的问题的答案 - 每个observable都是一个函数，需要调用 - 因此，self.id如果你将id作为不可观察的（但随后是Knockout）就可以了不能工作）;既然它是可观察的，那就需要self.id()。

编辑：对于自动滚动到底部，这个怎么样？

＆＃13;

function ViewModel(id, name) {
  var self = this;
  self.stuff = ko.observableArray([]);
}
var vm = new ViewModel();

ko.bindingHandlers.scrollToEnd = {
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    ko.utils.unwrapObservable(valueAccessor());
    var scroller = element.previousSibling.previousSibling;
    scroller.scrollTop = scroller.scrollHeight;
  }
};
ko.virtualElements.allowedBindings.scrollToEnd = true;

ko.applyBindings(vm);


setInterval(newDataCometh, 1000);

function newDataCometh() {
  var newData = (Math.random() * 100000 + 10000).toString(36); // just random gibberish
  vm.stuff.push(newData);
}

＆＃13;

#stuff {
  height: 100px;
  border: 1px solid black;
  overflow: scroll;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="stuff" data-bind="foreach: stuff">
  <div data-bind="text: $data"></div>
</div>
<!-- ko scrollToEnd: stuff --><!-- /ko -->

＆＃13;

通过敲除数据绑定获取id

1 个答案: