将jquery插件结果加载到Durandal视图中

我正在为mvc4使用Durandal启动模板。我已经设置了以下简单查看：将jquery插件结果加载到Durandal视图中

<section> 
    <h2 data-bind="html: displayName"></h2> 
    <h3 data-bind="html: posts"></h3> 
    <button data-bind="click: getrss">Get Posts</button> 
    <div id="rsstestid" ></div> 
</section>

和视图模型：

define(function (require) { 
    var http = require('durandal/http'), 
     app = require('durandal/app'); 

    return { 
     displayName: 'This is my RssTest', 
     posts: ko.observable(), 
     activate: function() { 
      return; 
     }, 
     getrss: function() { 
      $('#rsstestid').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews'); 
      return; 
     } 
    }; 
});

正如你所看到的，它只是使用zRssReader插件加载信息到一个div时“获取的帖子”按钮被点击。一切正常，显示名称已填充，帖子按预期显示。

我遇到麻烦的是当我尝试消除按钮并尝试在创建时加载帖子。如果我将插件调用放在激活函数中，我不会得到任何结果。我认为这是因为视图没有完全加载，所以元素不存在。我有两个问题：

如何延迟执行插件调用，直到视图完全组成为止？
更好的是，如何将插件结果加载到posts observable中而不是使用查询选择器？我尝试了很多组合，但没有运气

感谢您的帮助。

来源

2013-02-28 Woods

我也有同样的问题，我试图在durandal视图模型和视图绑定在一起后直接在元素上设置css属性。我也认为它不起作用，因为视图在我设定值时没有完全组成。

最好我已经想到了在durandal中使用viewAttached生命周期事件，我认为这是durandal viewmodel的加载周期中的最后一个事件，然后使用setTimeout来进一步延迟属性的设置。

这是一个非常垃圾的解决方法，但它现在工作。

var viewAttached = function (view) { 
     var _this = this; 

     var picker = new jscolor.color($(view).children('.cp')[0], { 
      onImmediateChange: function() { 
       _updateCss.call(_this, this.toString()); 
      } 
     }); 
     picker.fromString(this.color()); 
     setTimeout(function() { 
      _updateCss.call(_this, _this.color()); 
     }, 1000); 
    }; 

    var activate = function (data) { 
     system.log('activated: ' + this.selectors + ' ' + this.color()); 
    }; 
    var deactivate = function (isClose) { 
     system.log('deactivated, close:' + isClose); 
    }; 

    return { 
     viewAttached: viewAttached, 
     deactivate: deactivate, 
     activate: activate, 
     color: this.color 
    };

来源

2013-03-01 16:13:05

编辑**以下答案适用于durandal 1.2。在迪朗达尔2.0 viewAttached已更改为直接从粘贴attached

复制durandaljs.com

“每当迪朗达尔组成，它还会检查你的一个名为viewAttached函数模型，如果它存在，它会调用该函数并将绑定视图作为参数传递，这允许控制器或演示者可以直接访问它注入到其父级后的某个时间点所绑定的dom子树。：如果你已经设置了然后viewAttached只会在第一次在初始绑定中显示视图时调用，因为从技术上来说视图只附加一次。如果您希望覆盖此行为，请在您的作文绑定上设置alwaysAttachView:true。“ - quoted from the site

有很多方法可以做到这一点，但这里只是一个快速和肮脏的方式：

<section> 
    <h2 data-bind="html: displayName"></h2> 
    <h3 data-bind="html: posts"></h3> 
    <button data-bind="click: getRss">Get Posts</button> 
    <div id="rsstestid"></div> 
</section>

，代码：

define(function (require) { 
    var http = require('durandal/http'), 
     app = require('durandal/app'); 

    var $rsstest; 

    return { 
     displayName: 'This is my RssTest', 
     posts: ko.observable(), 
     viewAttached: function(view) { 
      $rssTest = $(view).find('#rsstestid'); 
     }, 
     getRss: function() { 
      $rssTest.rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews'); 
     } 
    }; 
});

来源

2013-03-20 00:59:26

@Eval我试过你的解决方案，但得到这个错误：TypeError：$ rssTest.rssfeed不是一个函数。你有什么主意吗？ – Parwej 2013-05-31 17:01:26

@ user836349确保viewAttached函数被调用。 Durandal应将此方法称为组合生命周期的一部分。然后确保$（view）.find（'＃rsstestid'）;正在获取对dom元素的引用。问题在于这两项行动中的一项。 – 2013-05-31 18:34:13

谢谢@even是的，你是对的。问题在于这些问题。 – Parwej 2013-06-03 16:52:36

一般，我认为避免直接触摸视图模型中的UI元素是明智的做法。

一个好方法是创建一个可以呈现rss提要的自定义KO绑定。这样，你可以保证视图在绑定执行时已经到位。您可能希望将Feed源作为视图模型的属性公开，然后自定义绑定可以在更新时读取它。

自定义绑定是非常简单的 - 如果我能做到这一点，那么它必须是:)

这里的淘汰赛自定义绑定快速入门的链接：http://knockoutjs.com/documentation/custom-bindings.html

来源

2013-03-22 14:30:01

我是有时间类似的问题。在初始页面加载中，在页面上加载了部分视图的情况下，我可以调用viewAttached函数并使用jQuery来绑定部分视图中的某些元素。时间按预期工作

但是，如果我导航到一个新的页面，然后回到初始页面，相同的viewAttached + jQuery方法未能找到页面上的元素......他们还没有附加到了最后。

尽我所能确定（迄今为止），这与entry.js文件中的过渡效果有关。我使用了默认的过渡，它导致一个对象淡出，并淡入一个新的对象。通过消除fadeOutTransition（在entrance.js中将其设置为0），我能够使viewAttached函数实际上与部分视图附件。

最好的猜测是，虽然第一个对象正在淡出，但传入的对象尚未连接到dom，但无论如何viewAttached方法被触发。

来源

2013-04-12 00:12:22

将jquery插件结果加载到Durandal视图中

回答

相关问题