Region

Description

Live example

Model

public class RegionSubSubModel
{
    public string SubSubModelName { get; set; }
}

public class RegionSubModel
{
    public string SubModelName { get; set; }
    public RegionSubSubModel SubSubModel { get; set; }
}

public class RegionModel
{
    public bool Condition1 { get; set; }
    public bool Condition2 { get; set; }
    public List<string> Items { get; set; }
    public string ModelName { get; set; }
    public RegionSubModel SubModel { get; set; }
}

Razor

@using PerpetuumSoft.Knockout
@model KnockoutMvcDemo.Models.RegionModel
@{
  var ko = Html.CreateKnockoutContext();
}
<h3>If</h3>
if<br />
Condition1: @ko.Html.CheckBox(m => m.Condition1)<br />
Condition2: @ko.Html.CheckBox(m => m.Condition2)<br />
then<br />
@using (ko.If(model => model.Condition1 && model.Condition2))
{
  <p>Condition1 and Condition2</p>
}
@using (ko.If(model => model.Condition1 || model.Condition2))
{
  <p>Condition1 or Condition2</p>
}
@using (ko.If(model => model.Condition1 ^ model.Condition2))
{
  <p>Condition1 xor Condition2</p>
}
@using (ko.If(model => model.Condition1))
{
  <p>Condition1</p>
}
@using (ko.If(model => model.Condition2))
{
  <p>Condition2</p>
}
@using (ko.If(model => !model.Condition1))
{
  <p>Not Condition1</p>
}
@using (ko.If(model => !model.Condition2))
{
  <p>Not Condition2</p>
}
<h3>Foreach</h3>
<table>
  <tr>
    <th>№</th>
    <th>Value</th>
  </tr>
  @using (var items = ko.Foreach(m => m.Items))
  {
    <tr>
      <td @items.Bind.Text(items.GetIndex())></td>
      <td @items.Bind.Text(m => m)></td>
    </tr>
  }
</table>
<h3>With</h3>
@using (var subModel = ko.With(m => m.SubModel))
{
  using (var subSubModel = subModel.With(m => m.SubSubModel))
  {
  @subSubModel.Html.Span(m => ko.Model.ModelName + " " + subModel.Model.SubModelName + " " + m.SubSubModelName)
  }
}
@ko.Apply(Model)

Controller

public class RegionController : BaseController
{
    public ActionResult Index()
    {
        InitializeViewBag("Region");
        var model = new RegionModel
        {
            Condition1 = true,
            Condition2 = false,
            Items = new List<string> { "A", "B", "C" },
            ModelName = "Model",
            SubModel = new RegionSubModel
                         {
                             SubModelName = "SubModel",
                             SubSubModel = new RegionSubSubModel { SubSubModelName = "SubSubModel" }
                         }
        };
        return View(model);
    }
}

Html (autogenerated)

<h3>If</h3>
if<br />
Condition1: <input data-bind="checked : Condition1" type="checkbox" /><br />
Condition2: <input data-bind="checked : Condition2" type="checkbox" /><br />
then<br />
<!-- ko if: (Condition1() && Condition2()) -->
  <p>Condition1 and Condition2</p>
<!-- /ko -->
<!-- ko if: (Condition1() || Condition2()) -->
  <p>Condition1 or Condition2</p>
<!-- /ko -->
<!-- ko if: (Condition1() ^ Condition2()) -->
  <p>Condition1 xor Condition2</p>
<!-- /ko -->
<!-- ko if: Condition1 -->
  <p>Condition1</p>
<!-- /ko -->
<!-- ko if: Condition2 -->
  <p>Condition2</p>
<!-- /ko -->
<!-- ko if: !Condition1() -->
  <p>Not Condition1</p>
<!-- /ko -->
<!-- ko if: !Condition2() -->
  <p>Not Condition2</p>
<!-- /ko -->
<h3>Foreach</h3>
<table>
  <tr>
    <th>№</th>
    <th>Value</th>
  </tr>
<!-- ko foreach: Items -->
    <tr>
      <td data-bind="text : $index()"></td>
      <td data-bind="text : $data"></td>
    </tr>
<!-- /ko -->
</table>
<h3>With</h3>
<!-- ko with: SubModel -->
<!-- ko with: $data.SubSubModel -->
<span data-bind="text : (((($parents[1].ModelName() + &#39; &#39;) + $parent.SubModelName()) + &#39; &#39;) + $data.SubSubModelName())"></span><!-- /ko -->
<!-- /ko -->
<script type="text/javascript"> 
var viewModelJs = {"Condition1":true,"Condition2":false,"Items":["A","B","C"],"ModelName":"Model","SubModel":{"SubModelName":"SubModel","SubSubModel":{"SubSubModelName":"SubSubModel"}}};
var viewModel = ko.mapping.fromJS(viewModelJs); 
ko.applyBindings(viewModel);
</script>