Custom cell is not updating viewmodel when user enters input into cell

Question

I am new into MVVMCross(Xamarin.iOS). So, I could be in wrong direction. If somebody can point me in right direction or point out what I am doing wrong.

I have already taken a look over "CustomerManagement" and "Collection" sample of MVVMCross.

Basically I am trying to create Settings screen.

I have one custom UITableViewCell with one text field. See my code below. "EntryTF" is IBOutleted. "EntryTF" is binded with "FirstName" property of Model. Setting value to "FirstName" is reflecting on UI. But if user enter something to textfield doesn't save to model. In short cell is not updating viewmodel/model.

Please note that I want to keep binding out of cell class. So, I can reuse this cell for other models or fields.

public partial class PlainEntryCell : UITableViewCell
{
    public static readonly UINib Nib = UINib.FromName ("PlainEntryCell", NSBundle.MainBundle);
    public static readonly NSString Key = new NSString ("PlainEntryCell");

    public PlainEntryCell (IntPtr handle) : base (handle)
    {
  //            this.DelayBind (() => {
 //             this.AddBindings(new Dictionary<object,string> ())
 //         });
    }

    public static PlainEntryCell Create ()
    {
        return (PlainEntryCell)Nib.Instantiate (null, null) [0];
    }

    public string CaptionText {
        get {
            return EntryTF.Text;
        }
        set {
            EntryTF.Text = value;
        }
    }
}

My View Model:

public class RegisterViewModel: MvxViewModel
{
    private RegisterModel _registerModel;

    public RegisterViewModel ()
    {
        _registerModel = new RegisterModel ();
        _registerModel.FirstName = "Test";
    }

    public RegisterModel Customer {
        get { return _registerModel; }
        set {
            _registerModel = value;
            RaisePropertyChanged ("Customer");
        }
    }
}

Model:

public class RegisterModel:MvxNotifyPropertyChanged
{
    private string _firstName;

    public string FirstName {
        get { return _firstName; }
        set {
            _firstName = value;
            RaisePropertyChanged ("FirstName");
        }
    }

    public string LastName { get; set; }

    public string PhoneNum { get; set; }

    public string Email { get; set; }

    public string Pin { get; set; }
}

TableView Source:

public class RegisterTableViewSource: MvxTableViewSource
{
    RegisterView _registerView;

    public RegisterTableViewSource (UITableView tableView, RegisterView registerView)
        : base (tableView)
    {
        _registerView = registerView;

        tableView.RegisterNibForCellReuse (PlainEntryCell.Nib,
            PlainEntryCell.Key);
        //tableView.RegisterNibForCellReuse (UINib.FromName ("DogCell", NSBundle.MainBundle), DogCellIdentifier);
    }

    protected override UITableViewCell GetOrCreateCellFor (UITableView tableView, Foundation.NSIndexPath indexPath, object item)
    {
        var cell = TableView.DequeueReusableCell (PlainEntryCell.Key, indexPath);
        cell.Bind (_registerView, "CaptionText Customer.FirstName");
        return cell;
        //return (UITableViewCell)TableView.DequeueReusableCell (PlainEntryCell.Key, indexPath);
    }

    public override nint RowsInSection (UITableView tableview, nint section)
    {
        return 2;
    }
}

Update: Still not able to get the answer. In above code I want to bind "EntryTF" with property of model. But I want to keep binding outside class. So, CaptionText property is not necessary if someone can point out direct way of binding to "EntryTF" Is not there a way of creating BindableProperty just like Xamarin Forms? I feel MVVMCross is matured framework so, why there is not a solution of this kind of simple things.

I would also love to here if there is any simple/other way of achieving the same things.

I have also looked MTD but didn't find much useful for custom cell and it is also need good amount of my learning.

Answer 1

Basically I am trying to create Settings screen.

Take a look at using monotouch dialog, mt.d, with MvvmCross, Use Mvvmcross Binding with MonoTouch.Dialog (Lists and Commands)

That StackOverflow question/answer will get you started using mt.d with mvvmcross. I use it for basic settings screens in my applications.

Cell Isn't Updating

I wrote an article on using custom cells with MvvmCross, see http://benjaminhysell.com/archive/2014/04/mvvmcross-custom-mvxtableviewcell-without-a-nib-file/

I have found it easier not to use nib files and fully describe my UI in code.

It looks like in your public partial class PlainEntryCell : UITableViewCell you don't ever bind the cell to the ViewModel. You have that commented out. I would try something like, while adding http://slodge.blogspot.com/2013/07/playing-with-constraints.html to your application for layout:

 public PlainEntryCell()
        {
            CreateLayout();
            InitializeBindings();
        }

 UILabel captionText;

 private void CreateLayout()
        {            
            SelectionStyle = UITableViewCellSelectionStyle.None;


            Accessory = UITableViewCellAccessory.DisclosureIndicator;          
            captionText = new UILabel();
             ContentView.AddSubviews(captionText);
            ContentView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
            const int vPadding = 10;
            const int hPadding = 20;
            ContentView.AddConstraints(

                captionText.AtTopOf(ContentView).Plus(vPadding),
                captionText.AtLeftOf(ContentView).Plus(hPadding),
                captionText.Width().EqualTo(UIScreen.MainScreen.Bounds.Width / 2)
);

 private void InitializeBindings()
        {
            this.DelayBind(() =>
            {
                var set = this.CreateBindingSet<PlainEntryCell, RegisterViewModel();
                set.Bind(captionText).To(vm => vm.CaptionText);               
                set.Apply();
            });
        }

}

Answer 2

Your custom cell needs to implement INotifyPropertyChanged to allow the ViewModel to be notified of a value change in your cell properties.

public partial class PlainEntryCell : UITableViewCell, INotifyPropertyChanged
{
    public static readonly UINib Nib = UINib.FromName ("PlainEntryCell", NSBundle.MainBundle);
    public static readonly NSString Key = new NSString ("PlainEntryCell");

    public PlainEntryCell (IntPtr handle) : base (handle)
    {
  //            this.DelayBind (() => {
 //             this.AddBindings(new Dictionary<object,string> ())
 //         });
    }

    public static PlainEntryCell Create ()
    {
        return (PlainEntryCell)Nib.Instantiate (null, null) [0];
    }

    public string CaptionText {
        get {
            return EntryTF.Text;
        }
        set {
            EntryTF.Text = value;
            RaisePropertyChanged("CaptionText");
        }
    }

    #region INotifyPropertyChanged implementation

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion
}