8

ノックアウト/jquery/asp.net mvc ページで使用される再利用可能なコントロールを作成したいと考えています。

たとえば、さまざまな項目でディスカッション (コメントのリスト) を行うことができます。コメントの表示と追加などを処理するディスカッション コントロールが必要です。

最初の考えは、部分ビューを使用して html を挿入し、ノックアウト ビューモデルを設定する JavaScript を含む .js ファイルを作成することです。それは少しぎこちないように見えますが。誰かがこれをすべて行い、それを素晴らしいコントロールとしてパッケージ化する本当に良い方法を持っているかどうか疑問に思っていますか?

4

3 に答える 3

3

ここに 1 つのアプローチがあります。

クライアント側からのデータ アクセスを処理するための別の WebAPI コントローラーがあります。

//Inside your CommentsApiController, for example
public IEnumerable<Comment> Get(int id)
{
    var comments = _commentsService.Get(int id);    //Call lower layers to get the data you need
    return comments;
}

MVC コントローラーには、 を返すアクションがありPartialViewResultsます。部分ビューを返す単純なアクションです。

//Inside your MVC CommentsController, for example
public PartialViewResult CommentsList(int id)
{
    return PartialView(id);
}

部分ビューは、ノックアウト バインディングを使用してマークアップをレンダリングします。HTML に一意の ID を作成して、ノックアウト ビューモデルをページのこの特定のセクションにバインドできるようにします (ページ上の他のノックアウト コンポーネントと競合しないようにします)。必要な JavaScript (ノックアウト ビューモデルなど) が含まれ、新しいビューモデルが作成され、ノックアウト バインディングが適用されます。

@{
    var commentsId = Model;    //passed from our MVC action
    var uniqueIid = System.Guid.NewGuid().ToString();
}
<section class="comments" id="@uniqueIid ">
    <ul data-bind="foreach: { data: Comments, as: 'comment' }">
        <li>
            <span data-bind="text: comment.Author"></span>
            <p data-bind="text: comment.Message"></p>
        </li>
    </ul>
</section>


@Scripts.Render("~/js/comments")    //using MVC Bundles to include the required JS
@{
    //generate the URL to our WebAPI endpoint.
    var url = Url.RouteUrl("DefaultApi", new { httproute = "", controller = "Comments", id = commentsId });
}
<script type="text/javascript">
    $(function() {
        var commentsRepository = new CommentsRepository('@url');
        var commentsViewModel = new CommentsViewModel(commentsRepository);

        var commentsElement = $('#@uniqueIid')[0];
        ko.applyBindings(commentsViewModel, commentsElement);
    });
</script>

JavaScript 内で、ノックアウト ビューモデルなどを定義します。

var CommentsRepository = function(url) {
    var self = this;
    self.url = url;

    self.Get = function(callback) {
        $.get(url).done(function(comments) {
            callback(comments);
        });
    };
};

var CommentsViewModel = function (commentsRepository) {
    var self = this;
    self.CommentsRepository = commentsRepository;
    self.Comments = ko.observableArray([]);

    //self executing function to Get things started
    self.init = (function() {
        self.CommentsRepository.Get(function(comments) {
            self.Comments(comments);
        });
    })();
};

これで完了です。この新しいコンポーネントを使用するには、次を使用できますRenderAction

@* inside our Layout or another View *@
<article>
    <h1>@article.Name</h1>
    <p>main page content here blah blah blah</p>
    <p>this content is so interesting I bet people are gonna wanna comment about it</p>
</article>
@Html.RenderAction("Comments", "CommentsList", new { id = article.id })
于 2013-07-04T11:21:49.787 に答える
0

HTML を自動的にノックアウトに接続することを検討している場合は、https://github.com/phototom/ko-autobind にある私のプラグインをご覧ください。

これはまだ進行中の作業です。これを使用するには、 http://jsfiddle.net/rxXyC/11/のデモ フィドルをご覧ください。

また、 https://github.com/SteveSanderson/knockout/wiki/Pluginsで利用可能なプラグインのリストも確認できます。

于 2011-10-17T01:12:57.810 に答える
0

「コントロール」とは、ASP.NET WebForms から慣れ親しんだコントロールの種類を意味する場合、ASP.NET MVC で最も近いものはHTML Helpersです。これらは基本的に を返す通常の .NET メソッドであるため、(JavaScript、CSS、および画像ファイル用の)埋め込みリソースHtmlStringと共に、これらのメソッドを含むアセンブリ内に必要なものを簡単にパッケージ化できます。

于 2011-10-16T23:00:51.810 に答える