如何使用 Prism MVVM 连接 Awesomium WebControl 事件答案

【问题标题】：How to wire Awesomium WebControl events with Prism MVVM如何使用 Prism MVVM 连接 Awesomium WebControl 事件
【发布时间】：2014-09-21 09:29:15
【问题描述】：

我继承了一个使用 Prism MVVM 的 WPF MVVM 项目。我想在视图上使用 Awesomium WebControl。我在 xaml 中定义了 WebControl，如下所示：

<awe:WebControl Name="taskBrowser" Source="http://localhost:59298/Tasks" Height="680" Width="680">

这很好用，但我还需要能够将数据从网页中的 Javascript 事件传递到 WPF 应用程序。当我在代码隐藏中执行此操作时，我有此工作，但是由于我们使用的是 MVVM，所以我想以“正确”的方式做事，并且不知何故不在后面的代码中执行，而是在 ViewModel 中执行。所以问题 1 是：我需要在 ViewModel 中连接一个 DocumentReady 事件，如下所示。

问题 2 是：我需要对 ViewModel 中的 taskBrowser 进行一些引用，以便能够执行如下所示的“taskBrowser.CreateGlobalJavascriptObject”命令将网页 js 连接到 WPF 方法。但是在 ViewModel un-MVVM 中有对 taskBrowser 对象的引用吗？我怎么能通过这个参考？无论如何，谁能告诉我如何解决这两个问题？

public MyCodeBehindConstructor()
{
    {
        InitializeComponent();
        ...
        taskBrowser.DocumentReady += TaskBrowserOnDocumentReady;
    }
}

private void TaskBrowserOnDocumentReady(object sender, UrlEventArgs urlEventArgs)
{
    taskBrowser.DocumentReady -= TaskBrowserOnDocumentReady;
    JSObject jsobject = taskBrowser.CreateGlobalJavascriptObject("jsobject");
    jsobject.Bind("callNETNoReturn", false, JSHandler);
}

private void JSHandler(object sender, JavascriptMethodEventArgs args)
{
    if (args.MustReturnValue)
    {
        Console.WriteLine("Got method call with return request");
        args.Result = "Returning " + args.Arguments[0];
    }
    else
    {
        Console.WriteLine("Got method call with no return request");
    }
}

【问题讨论】：

标签： wpf xaml mvvm awesomium

【解决方案1】：

我刚刚发布了一个新框架，它可以在 C# ViewModel 和 awesomium 之间建立所有管道。基本上，您需要一个调用来将视图模型链接到 IWebView，然后框架将创建反映 C# 视图模型的 javascripts 对象。它基于 knouckout.js，所以它是完整的 MVVM。 ICommand 也映射到您可以使用 knouckout 标记绑定的 javascript 方法。通过 INotityPropertyChanged 和 INotityCollectionChanged 跟踪集合和属性更改。您可以在 github 上找到带有示例的整个项目：https://github.com/David-Desmaisons/MVVM-for-awesomium 例如：视图模型：

public class ViewModelBase : INotifyPropertyChanged
    {
        protected void Set<T>(ref T ipnv, T value, string ipn)
        {
            if (object.Equals(ipnv, value))
                return;
            ipnv = value;
            OnPropertyChanged(ipn);
        }

        protected virtual void OnPropertyChanged(string pn)
        {
            if (PropertyChanged == null)
                return;

            PropertyChanged(this, new PropertyChangedEventArgs(pn));
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }

   public class Person: ViewModelBase
    {
        public Person()
        {
            Skills = new ObservableCollection<Skill>();
            RemoveSkill = new RelayCommand<Skill>(s=> this.Skills.Remove(s));
        }

        private string _LastName;
        public string LastName
        {
            get { return _LastName; }
            set { Set(ref _LastName, value, "LastName"); }
        }

        private string _Name;
        public string Name
        {
            get { return _Name; }
            set { Set(ref _Name, value, "Name"); }
        }

        public IList<Skill> Skills { get; private set; }

        public ICommand RemoveSkill { get; private set; }
    }

查看（HTML+ 敲除标记）：

<!doctype html>
<html>
    <head>
        <title></title>
        <script src="js/knockout.js" type="text/javascript"></script>
        <script src="js/Ko_Extension.js" type="text/javascript"></script>
    </head>
    <body>
        <input type="text" data-bind="value: Name, valueUpdate:'afterkeydown'" placeholder="First name" >
        <ul data-bind="foreach: Skills">
            <li><span data-bind="text:Type"></span>:<span data-bind="text:Name"></span>
            <button data-bind="click: function (){$root.RemoveSkill($data)}">Remove skill</button></li>
        </ul>
        <div>
            <h2><span data-bind="text: Name"></span></h2>
            <h2><span data-bind="text: LastName"></span></h2>
        </div>

        <button data-bind="click: ChangeSkill">Click me</button>
    </body>
</html>

绑定：

IWebView mywebview = ...; //retrieve awesomium view wich loaded the HTML view
var datacontext = new Person();
AwesomeBinding.Bind(mywebview, datacontext, JavascriptBindingMode.TwoWay);

【讨论】：