Question

我有一个Knockout js viewModel并希望使用外部模板来获取MVC 4 razor（cshtml）绑定页面，这样初始页面可以在服务器上创建或通过Knockout绑定，我将在运行时决定。我想将模板的名称传递给控制器，如下所示（/ Templates / KnockoutTemplate？templateName ='gauge'）其中'gauge'是视图的名称（radial.tmpl.cshtml），并让Knockout将其放入模板块。

我的控制器：

public class TemplatesController : Controller
{
     public TemplatesViewModel viewModel { get; set; }
     public TemplatesController()
     {
        this.viewModel = new TemplatesViewModel { Heading = "Radial" };
     }

    public ActionResult KnockoutTemplate(string templateName)
    {
        // is this right?
        return  PartialView(templateName, this.viewModel);
    }
}

radial.cshtml

   @model MVC4.Models.TemplatesViewModel
    @{
        ViewBag.Title = "Radial Template";
    }
    <div id="radialDashboardWidget" class="dashboardWidget" style="width: 100%">
     <h4 class="bold">@Model.Heading </h4>
     <!-- or I can do this, I'll decide at development time  -->
     <h4 class="bold" data-bind="text:heading"></h4>
    </div>

主页

<div id="dashboardWidgets" data-bind="foreach: Widgets" class="flexible-widget">
 <!-- ko template: {name: Properties.templateName  } -->
 <!-- /ko -->
 <div class="clear" />
</div>

Answer 1

我在这里已经回答了这个问题：http://geekswithblogs.net/Aligned/archive/2012/08/17/knockout-js-and-external-mvc-cshtml-templates.aspx

我的控制器：

public class TemplatesController : Controller
{
    public TemplatesViewModel viewModel { get; set; }

    public ActionResult KnockoutTemplate(string templateName)
    {
        return  PartialView(templateName.Replace("/", string.Empty), this.viewModel);
    }
}

radial.cshtml

@model MVC4.Models.TemplatesViewModel
@{
    ViewBag.Title = "Radial Template";
}

<div id="radialDashboardWidget" class="dashboardWidget" style="width: 100%">
    <h4 class="bold" data-bind="text:@Model.Heading"></h4>
    <!-- add more HTML -->
</div>

带有Knockout的仪表板页面

<div id="dashboardWidgets" data-bind="foreach: Widgets" class="flexible-widget">
    <!-- ko template: {name: Properties.templateName  } -->
    <!-- /ko -->
    <div class="clear" />
</div>

Answer 2

不确定要实现的目标。在您的cshtml中，您将“绑定”服务器端的Model对象，而不是客户端JavaScript对象的可观察属性。你没有在那里使用Knockout。请发布获取Widgets对象的Javascript，以便我们为您提供帮助。

Knockout js来自MVC控制器的外部模板

2 个答案: