通过敲除数据绑定获取id

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

我不确定我是否正确理解了这个问题，也不知道如何要求您澄清。基本上，您有多个错误，很难猜测最初的意图。看看这是否符合您的要求；如果不是，请说明您确实想做什么（这与我正在做的不同）。

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();

<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>

具体来说：

• data 在你的例子中只是5，所以data.name 是undefined
• 为了在 data-bind、id 和 name 中使用它们，需要是 Knockout observables
• 如果将+（连接）应用于字符串和HTML元素，则元素将显示为[object HTMLDivElement]，这不是很有用
• 最后，您的问题的答案 - 每个 observable 都是一个函数，需要调用 - 因此，如果您将 id 保留为不可观察，self.id 会很好（但随后 Knockout 无法工作);现在它是可观察的，它需要是self.id()。

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

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);
}

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

<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 -->