Question

我在调用applyBindings后创建了一个元素。

LRESULT CALLBACK capVideoStreamCallback(HWND hWnd, LPVIDEOHDR lpVHdr)
{
    BYTE *Image;
    BITMAPINFO * TempBitmapInfo = new BITMAPINFO;
    ULONG Size;

    // First we need to get the full size of the image
    Size = capGetVideoFormat(hWnd, TempBitmapInfo, sizeof(BITMAPINFO)); //header size
    Size += lpVHdr->dwBytesUsed; //bytes used

    Image = new BYTE[Size];
    memcpy(Image, TempBitmapInfo, sizeof(BITMAPINFO)); //copy the header to Image

    // lpVHdr is LPVIDEOHER passed into callback function.
    memcpy(Image + sizeof(BITMAPINFO), lpVHdr->lpData, lpVHdr->dwBytesUsed); //copy the data to Image

    //write the image
    ofstream output("image.dib", ios::binary);
    for (int i = 0; i < Size; i++)
    {
        output << (BYTE)Image[i];
    }
    output.close();

    return (LRESULT)TRUE;
}

其中someObservable是一个observable，在调用applybindings之后设置为true，并且该函数位于视图模型中：

<span data-bind="html: $root.someObservable() && $root.generateLink()" />

我已确认在调用applyBindings后调用该函数。我正在尝试对此元素应用单击绑定。我尝试过的技术都没有。我试着打电话：

function generateLink() {
    var d = document.createElement("div");
    var link = document.createElement("a");
    link.href = "someurl.com";
    link.target = "_blank";
    link.textContent = "link";
    d.appendChild(link);

    return d.innerHTML;
}

然后致电：

link.setAttribute("data-bind", "click: $root.someFunction.bind($param, 'abc')

但点击绑定永远不会触发。我也试过了：

ko.applyBindings(this, d);

但同样没有触发任何事情。有什么想法吗？

谢谢！

Answer 1

像这样的解决方案有效吗？你可以有一个observable（observableArray）代表你想要显示的链接。正如您在下面看到的，我延迟创建链接模型，直到绑定已经发生（在按钮单击）。我不确定这是否可行，但似乎可能。干杯！

function generateLink(href) {
  var self = this;
  
  self.href = href;
  self.target = "_blank";
  self.textContext = "link";
  
  return self;
}

function ParentViewModel() {
  var self = this;
  
  self.generatedLink = ko.observable(null);
  
  self.onClick = function() {
    self.generatedLink(generateLink('http://google.com'));
  }
  
  return self;
}

ko.applyBindings(new ParentViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<button data-bind="click: onClick">Show</button>

<!-- ko with: generatedLink -->
<div>
  <a data-bind="text: href, attr: {href: href, target: target, textContext: textContext}"></a>
</div>
<!-- /ko -->

Answer 2

我必须更多地了解applyBindings如何处理节点以准确解释它失败的原因，但是可以这样做（黑客）。

＆＃13;

var vm = {
  someObservable: ko.observable()
}

vm.generateLink= function() {
  var d = document.createElement("div");
  var link = document.createElement("a");
  link.href = "someurl.com";
  link.target = "_blank";
  link.textContent = "link";
  d.appendChild(link);

  link.setAttribute("data-bind", "click: function(){console.log('clicked')}");
  link.setAttribute("id", "myLink");
  
  setTimeout(function(){
    ko.applyBindings({}, document.getElementById('myLink'))},
    1000)
    
  return d.innerHTML;
}

ko.applyBindings(vm)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input type='checkbox' data-bind='checked: someObservable'>Toggle</input>

<!-- ko with: someObservable -->
<span data-bind="html: $root.generateLink()"></span>
<!-- /ko -->

＆＃13;

我强烈建议不要使用这种方法。利用Knockout提供的绑定套件，您可以免除对document进行调用的需要。如果你手动操作DOM的结构，它就会破坏使用Knockout的目的，并使你更加努力地实现结果 - 例如手头的问题。 html绑定不是我在这种情况下使用的方法。有几种方法可以实现所需的结果，同时保持更多的M-V-VM分离。

另一方面，除非事情发生变化，否则使用自闭标签可能会导致unexpected behavior。

将click绑定应用于applybindings之后创建的元素

2 个答案: