User script

Description

Sample shows how to add user scripts extending standard viewModel. There are two model methods: AddLetter (performed on server side) and reverse (performed on client side).

Live example

Message:

Model

public class UserScriptModel
{
    public string Message { get; set; }

    public void AddLetter()
    {
        Message += (char)('a' + new Random().Next(26));
    }
}

Razor

@using PerpetuumSoft.Knockout
@model KnockoutMvcDemo.Models.UserScriptModel
@{
  var ko = Html.CreateKnockoutContext();
}
Message: @ko.Html.TextBox(m => m.Message)
<br />
@ko.Html.Button("Add letter", "AddLetter", "UserScript")
<button data-bind="click: reverse">Reverse</button>

@ko.Initialize(Model)
<script type="text/javascript">
  String.prototype.reverse = function () { return this.split("").reverse().join(""); };

  viewModel.reverse = function () {
    viewModel.Message(viewModel.Message().reverse());
  };
</script>
@ko.Apply(Model)

Controller

public class UserScriptController : BaseController
{
    public ActionResult Index()
    {
        InitializeViewBag("User script");
        var model = new UserScriptModel { Message = "Knockout" };
        return View(model);
    }

    public ActionResult AddLetter(UserScriptModel model)
    {
        model.AddLetter();
        return Json(model);
    }
}

Html (autogenerated)

Message: <input data-bind="value : Message" name="Message" type="text" />
<br />
<button data-bind="click : function() {executeOnServer(viewModel, &#39;/UserScript/AddLetter&#39;);}">Add letter</button>
<button data-bind="click: reverse">Reverse</button>

<script type="text/javascript"> 
var viewModelJs = {"Message":"Knockout"};
var viewModel = ko.mapping.fromJS(viewModelJs); 
</script>

<script type="text/javascript">
  String.prototype.reverse = function () { return this.split("").reverse().join(""); };

  viewModel.reverse = function () {
    viewModel.Message(viewModel.Message().reverse());
  };
</script>
<script type="text/javascript">
ko.applyBindings(viewModel);
</script>